使用JSONArray生成动态Google Line Chart失败，图表无法显示求排查

我帮你找出了几个导致图表无法渲染的关键问题，下面逐一说明并给出修正后的完整代码：

问题分析 #

• JSON数据结构不匹配：你提供的JSON是一个外层包含data属性的对象，但代码里直接使用JSONArray遍历，实际需要访问的是JSONArray.data这个数组。
• DataTable初始化冲突：你先用new google.visualization.DataTable(JSONArray)初始化表格，但这个方法需要的是Google Charts特定格式的JSON，而不是你自定义的结构，随后又手动添加列和行，这会导致数据结构混乱。
• 日期类型未正确处理：将日期以字符串形式传入，可能会导致图表轴排序或显示异常，转成Date对象能更好地适配Google Charts的时间轴逻辑。
• 配置属性错误：原代码里用了color（单数）来设置线条颜色，Google Charts的正确属性是colors（复数）；趋势线配置缺少系列索引，导致趋势线无法生效。

修正后的完整代码 #

<div id="curve_chart" style="margin-bottom: -12px; margin-left: -28px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 定义你的JSON数据（如果是后端传入，确保变量名和访问路径一致即可）
const JSONArray = {
  "data": [
    { "Day": "2019-09-13T00:00:00", "TotalFeedings": 3 },
    { "Day": "2019-09-14T00:00:00", "TotalFeedings": 10 },
    { "Day": "2019-09-15T00:00:00", "TotalFeedings": 14 },
    { "Day": "2019-09-16T00:00:00", "TotalFeedings": 19 },
    { "Day": "2019-09-17T00:00:00", "TotalFeedings": 14 },
    { "Day": "2019-09-18T00:00:00", "TotalFeedings": 24 },
    { "Day": "2019-09-19T00:00:00", "TotalFeedings": 15 },
    { "Day": "2019-09-20T00:00:00", "TotalFeedings": 18 },
    { "Day": "2019-09-21T00:00:00", "TotalFeedings": 14 },
    { "Day": "2019-09-22T00:00:00", "TotalFeedings": 10 },
    { "Day": "2019-09-23T00:00:00", "TotalFeedings": 13 },
    { "Day": "2019-09-24T00:00:00", "TotalFeedings": 9 },
    { "Day": "2019-09-25T00:00:00", "TotalFeedings": 11 },
    { "Day": "2019-09-26T00:00:00", "TotalFeedings": 8 },
    { "Day": "2019-09-27T00:00:00", "TotalFeedings": 7 },
    { "Day": "2019-09-28T00:00:00", "TotalFeedings": 2 }
  ]
};

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart0);

function drawChart0() {
  // 创建空的DataTable，避免错误的初始化方式
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day'); // 改为date类型，优化时间轴显示
  data.addColumn('number', 'TotalFeedings');
  
  // 遍历正确的数组对象，将日期字符串转为Date对象
  for (var i = 0; i < JSONArray.data.length; i++) {
    data.addRow([new Date(JSONArray.data[i].Day), JSONArray.data[i].TotalFeedings]);
  }

  var options0 = {
    curveType: 'function',
    legend: 'none',
    lineWidth: 6,
    width: 440,
    height: 180,
    backgroundColor: 'transparent',
    axisTitlesPosition: 'in',
    colors: ['#286090'], // 修正为正确的复数属性名
    trendlines: {
      0: { // 指定系列索引，让趋势线绑定到对应数据系列
        type: 'linear',
        color: 'green',
        lineWidth: 3,
        opacity: 0.3,
        showR2: true,
        visibleInLegend: true
      }
    },
    vAxis: { gridlines: { count: 8 } }
  };

  var chart0 = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart0.draw(data, options0);
}
</script>

现在运行这段代码，图表应该就能正常显示了，而且时间轴会更合理，趋势线也能正确渲染。

内容的提问来源于stack exchange，提问作者hlf