着色單元格Google圖表 - 散點圖

我在我的一個項目中使用了google圖表。我需要使用以下代碼在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>

請幫我解決這個

來源

2017-02-20 Gilson Gilbert

你需要使用'ComboChart'與2個堆積區域系列設置_cell_顏色 - 底部區域將是透明的 - [這個答案]（http://stackoverflow.com/a/39671447/5090771）_may_幫助... – WhiteHat

使用ComboChart有兩個堆疊面積系列色細胞

底部區域會be 'transparent'

使用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>

來源

2017-02-21 17:58:18 WhiteHat

這個問題你好運嗎？你會接受嗎？ – WhiteHat

着色單元格Google圖表 - 散點圖

回答

相關問題