채색 셀 Google 차트 - 분산 형 차트

Question

내 프로젝트에서 Google 차트를 사용 중입니다. 다음 코드를 사용하여 Google 분산 형 차트에서 셀 집합에 색을 지정해야합니다.

나는 데이터 처리를 위해 google.visualization.arrayToDataTable을 사용하고 있습니다.

다음

는

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<div id="chart_div"></div> 

<script type="text/javascript"> 
google.charts.load('current', { 
    callback: function() { 
    var dataTable = new google.visualization.DataTable({ 
     cols: [ 
     {label: 'X', type: 'number'}, 
     {label: 'Low', type: 'number'}, 
     {label: 'High', type: 'number'}, 
     {label: 'Y', type: 'number'} 
     ], 
     rows: [ 
     {c:[{v: 3}, {v: 3.5}, null, null]}, 
     {c:[{v: 4}, {v: 5.5}, null, null]}, 
     {c:[{v: 4}, {v: 5}, null, null]}, 
     {c:[{v: 6.5}, {v: 7}, null, null]}, 
     {c:[{v: 8}, {v: 12}, null, null]}, 
     // begin cell color 
     {c:[{v: 10}, null, {v: 10}, {v: 10}]}, 
     {c:[{v: 11}, null, {v: 10}, {v: 10}]}, 
     {c:[{v: 20}, null, {v: 10}, {v: 10}]}, 
     ] 
    }); 

    var options = { 
     legend: 'none', 
     hAxis: { 
     ticks: [0, 5, 10, 15, 20], 
     title: 'Age' 
     }, 
     height: 400, 
     isStacked: true, 
     series: { 
     // low 
     1: { 
      color: 'transparent', 
      type: 'area', 
      visibleInLegend: false 
     }, 

     // high 
     2: { 
      areaOpacity: 0.6, 
      color: '#A5D6A7', 
      type: 'area', 
      visibleInLegend: false 
     } 
     }, 
     seriesType: 'scatter', 
     title: 'Age vs. Weight comparison', 
     vAxis: { 
     ticks: [0, 5, 10, 15, 20], 
     title: 'Weight' 
     } 
    }; 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    chart.draw(dataTable, options); 
    }, 
    packages:['corechart'] 
}); 
</script> 

이

Answer 1

가 ComboChart 스택 두와 지역을 시리즈

바닥 지역 것이다 세포 컬러 에를 사용하여 고정 제발 도와주세요 내 코드입니다 be 'transparent'

당신이를 사용해야합니다 (10)

사용 행이 일치하지 않는 데이터에 null ...

---

이 작업 조각을 다음을 참조 ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'X', type: 'number'}, 
 
     {label: 'Low', type: 'number'}, 
 
     {label: 'High', type: 'number'}, 
 
     {label: 'Y', type: 'number'} 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 3}, {v: 3.5}, null, null]}, 
 
     {c:[{v: 4}, {v: 5.5}, null, null]}, 
 
     {c:[{v: 4}, {v: 5}, null, null]}, 
 
     {c:[{v: 6.5}, {v: 7}, null, null]}, 
 
     {c:[{v: 8}, {v: 12}, null, null]}, 
 
     // begin cell color 
 
     {c:[{v: 10}, null, {v: 10}, {v: 10}]}, 
 
     {c:[{v: 11}, {v: 14}, {v: 10}, {v: 10}]}, 
 
     {c:[{v: 20}, null, {v: 10}, {v: 10}]}, 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     legend: 'none', 
 
     hAxis: { 
 
     ticks: [0, 5, 10, 15, 20], 
 
     title: 'Age' 
 
     }, 
 
     height: 400, 
 
     isStacked: true, 
 
     series: { 
 
     // low 
 
     1: { 
 
      color: 'transparent', 
 
      type: 'area', 
 
      visibleInLegend: false 
 
     }, 
 

 
     // high 
 
     2: { 
 
      areaOpacity: 0.6, 
 
      color: '#A5D6A7', 
 
      type: 'area', 
 
      visibleInLegend: false 
 
     } 
 
     }, 
 
     seriesType: 'scatter', 
 
     title: 'Age vs. Weight comparison', 
 
     vAxis: { 
 
     ticks: [0, 5, 10, 15, 20], 
 
     title: 'Weight' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>