关于使用Google Charts API绘制多折线图的数据格式问询

嘿，我来帮你解决多折线图的数据格式问题！其实核心就是在你返回的JSON里，给每个折线对应加一个数据列，然后在行数据里匹配对应的值就行，我给你一步步拆解：

核心数据结构要点 #

Google Charts的DataTable格式要支持多折线，需要满足这两点：

• 列定义（cols）：第一个列是你的分类轴（比如你代码里的"Topping"，作为x轴标签），之后每新增一条折线，就加一个type为number的列，并且给每个列设置独特的label（也就是折线的名称，方便图例显示）。
• 行数据（rows）：每个rows里的c数组，第一个元素对应分类列的值，后面依次对应每个折线的数值，顺序必须和cols里的数值列完全对应。

结合你的Express代码修改示例 #

我把你的后端代码改成支持多折线的版本，比如我们要展示三种披萨配料的销量：

var express = require('express');
var router = express.Router();
var request = require('request');

router.get('/', function(req, res){
  // 模拟从API获取的多折线数据，你可以替换成实际的API请求结果
  const multiLineData = {
    "cols": [
      {"id":"","label":"Topping","pattern":"","type":"string"},
      {"id":"","label":"Pepperoni","pattern":"","type":"number"},
      {"id":"","label":"Cheese","pattern":"","type":"number"},
      {"id":"","label":"Mushrooms","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Small"},{"v":10},{"v":15},{"v":8}]},
      {"c":[{"v":"Medium"},{"v":20},{"v":25},{"v":12}]},
      {"c":[{"v":"Large"},{"v":15},{"v":18},{"v":10}]}
    ]
  };
  res.send(JSON.stringify(multiLineData));
});

module.exports = router;

前端绘制多折线的示例代码 #

光后端返回数据还不够，前端得正确加载并绘制，给你一个简单的前端示例：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // 请求你的后端接口获取数据
        fetch('/your-api-endpoint')
          .then(response => response.json())
          .then(data => {
            const dataTable = new google.visualization.DataTable(data);
            const options = {
              title: 'Pizza Topping Sales by Size',
              curveType: 'function',
              legend: { position: 'bottom' }
            };
            const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);
          });
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

关键提示 #

• 确保rows里每个c数组的元素数量和cols的长度一致，少一个都会报错。
• 如果你的API返回的是分散的数据集，可以在后端先把数据整理成上面的DataTable格式，再返回给前端，这样前端直接用就行。

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