Раскраски Ячейки Google Chart - Диаграмма рассеяния

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'

использование 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>