Javascript 着色单元格谷歌图-散点图

我正在我的一个项目中使用谷歌图表。我需要用下面的代码给谷歌散点图中的一组单元格上色

我正在使用

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>

google.charts.load（'current'{
回调：函数（）{
var dataTable=新的google.visualization.dataTable({
科尔斯：[
{标签：'X'，类型：'number'}，
{标签：'Low'，类型：'number'}，
{标签：'High'，类型：'number'}，
{标签：'Y'，类型：'number'}
],
行：[
{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]}，
//开始单元格颜色
{c:[{v:10}，null，{v:10}，{v:10}]}，
{c:[{v:11}，null，{v:10}，{v:10}]}，
{c:[{v:20}，null，{v:10}，{v:10}]}，
]
});
变量选项={
图例：“无”，
哈克斯：{
滴答声：[0,5,10,15,20]，
标题：“年龄”
},
身高：400，
isStacked：是的，
系列：{
//低
1: {
颜色：'透明'，
类型：'区域'，
visibleInLegend:false
},
//高
2: {
面积不透明度：0.6，
颜色：“#A5D6A7”，
类型：'区域'，
visibleInLegend:false
}
},
序列类型：“散布”，
标题：“年龄与体重对比”，
言辞：{
滴答声：[0,5,10,15,20]，
标题：“重量”
}
};
var chart=new google.visualization.ComboChart（document.getElementById（'chart_div'））；
图表绘制（数据表、选项）；
},
软件包：['corechart']
});

请帮助我修复此问题

使用具有两个堆叠区域的系列对单元格进行着色

底部区域将是透明的

在行不一致的数据中使用

null

---

请参阅以下工作片段

google.charts.load（'current'{
回调：函数（）{
var dataTable=新的google.visualization.dataTable({
科尔斯：[
{标签：'X'，类型：'number'}，
{标签：'Low'，类型：'number'}，
{标签：'High'，类型：'number'}，
{标签：'Y'，类型：'number'}
],
行：[
{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]}，
//开始单元格颜色
{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}]}，
]
});
变量选项={
图例：“无”，
哈克斯：{
滴答声：[0,5,10,15,20]，
标题：“年龄”
},
身高：400，
isStacked：是的，
系列：{
//低
1: {
颜色：'透明'，
类型：'区域'，
visibleInLegend:false
},
//高
2: {
面积不透明度：0.6，
颜色：“#A5D6A7”，
类型：'区域'，
visibleInLegend:false
}
},
序列类型：“散布”，
标题：“年龄与体重对比”，
言辞：{
滴答声：[0,5,10,15,20]，
标题：“重量”
}
};
var chart=new google.visualization.ComboChart（document.getElementById（'chart_div'））；
图表绘制（数据表、选项）；
},
软件包：['corechart']
});

您需要使用带有两个堆叠区域系列的组合图来设置单元格颜色-底部区域将是透明的-可能会有帮助…这个问题有什么进展吗？请接受好吗？