使用GoogleCharts API创建多行图

我试图使用谷歌图表，使用来自API的JSON数据，在一个折线图上画多条线。我能够使用API中的点数据绘制一条直线，但是我不确定多条直线的数据格式

这是我使用谷歌图表的客户端代码

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

router.get('/', function(req, res){
    res.send(JSON.stringify({
        "cols": [
            {"id":"","label":"Topping","pattern":"","type":"string"},
            {"id":"","label":"Slices","pattern":"","type":"number"}
        ],
        "rows": [
            {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null}]},
            {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Olives","f":null},{"v":2,"f":null}]},
            {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
        ]
    }))

    console.log('done with the sample api 1')
    req.flash('success_msg', 'You successfully retrieved all goals');
    console.log('done with the sample api 2')
});

module.exports = router; 

我观察的图表如下

但是，我正在尝试生成一个如下所示的图像

有人能帮我处理JSON数据的格式吗？它可以生成一个像这样的多行图像

另外，是否有一种方法可以指定我希望在多线图中看到某些虚线和一些其他实线，如下所示

PS：我知道您可以如下硬编码点，以生成多行。然而，我更希望它来自一个json对象，如我上面所示，因此我可以用一个发出json对象的RESTAPI端点来替换它

var data = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2004',  1000,      400],
                ['2005',  1170,      460],
                ['2006',  660,       1120],
                ['2007',  1030,      540]
            ]); 

编辑：根据@WhiteHat下面的回复，我尝试创建一个包含4行的图表，其中两行是虚线，两行是实线。在第17周、第18周、第19周、第20周和第21周的图表中，每条线都有五个点。然而，我看到只有两条线被画出来

下面是我的json输入

res.send({
    "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"}, 

        {"id":"","label":"Solid-Series-1","pattern":"","type":"number"},   
        {"id":"","label":"Solid-Series-2","pattern":"","type":"number"},  
        {"id":"","label":"Dotted-Series-1","pattern":"","type":"number"},   
        {"id":"","role":"certainty","type":"boolean"},
        {"id":"","label":"Dotted-Series-2","pattern":"","type":"number"}, 
        {"id":"","role":"certainty","type":"boolean"}
    ],
    "rows": [
        {"c":[{"v":"Week 17","f":null},{"v":6,"f":null},{"v":5,"f":null},{"v":4,"f":null},{"v":3,"f":null},{"v":false}]},
        {"c":[{"v":"Week 18","f":null},{"v":12,"f":null},{"v":11,"f":null},{"v":8,"f":null},{"v":7,"f":null},{"v":false}]},
        {"c":[{"v":"Week 19","f":null},{"v":18,"f":null},{"v":15,"f":null},{"v":12,"f":null},{"v":12,"f":null},{"v":false}]},
        {"c":[{"v":"Week 20","f":null},{"v":24,"f":null},{"v":20,"f":null},{"v":16,"f":null},{"v":14,"f":null},{"v":false}]}
    ]
})

编辑以添加颜色 这是我试图在JSON输入中为图表指定颜色的尝试。然而，我无法选择颜色。请告知我如何指定要添加的颜色

res.send({
         "cols": [
                 {"id":"","label":"Topping","pattern":"","type":"string"},

                 {"id":"","label":"Series 1 solid","pattern":"","type":"number"},
                 {"id":"","label":"Series 2 solid","pattern":"","type":"number"},

                 {"id":"","label":"Series 1 dotted","pattern":"","type":"number"},
                 {"id":"","role":"certainty","type":"boolean"},
                 {"id":"","label":"Series 2 dotted","pattern":"","type":"number"},
                 {"id":"","role":"certainty","type":"boolean"},
                 {"id":"","role":"style"}
             ],
             "rows": [
                 {"c":[{"v":"Week 17"},{"v":6},{"v":5},{"v":4},{"v":false},{"v":3},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 18"},{"v":12},{"v":11},{"v":8},{"v":false},{"v":7},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 19"},{"v":18},{"v":15},{"v":12},{"v":false},{"v":12},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 20"},{"v":24},{"v":20},{"v":16},{"v":false},{"v":14},{"v":false},{"color":"red"}]}
             ]
     })

---

要添加多行，请向数据表中添加多列

数据表应该有一列用于x轴，
每个附加列将用于y轴

{
  "cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},  // x-axis
    {"id":"","label":"Slices 1","pattern":"","type":"number"},   // y-axis - series 0 - line 1
    {"id":"","label":"Slices 2","pattern":"","type":"number"},   // y-axis - series 1 - line 2
    {"id":"","label":"Slices 3","pattern":"","type":"number"},   // y-axis - series 2 - line 3
  ],
  "rows": [
    {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null}]},
    {"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]},
    {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]}
  ]
}

您还可以为添加列，例如样式或确定性
该角色将应用于它后面的系列列

当角色值为false时，确定性角色将变为虚线， 在下面的示例中，第三条线将用虚线表示

{
  "cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},  // x-axis
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 0 - line 1
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 1 - line 2
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 2 - line 3
    {"id":"","role":"certainty","type":"boolean"},             // certainty role - false = dotted
  ],
  "rows": [
    {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null},{"v":false}]},
    {"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
    {"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]},
    {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
    {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]}
  ]
}

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable({
“科尔斯”：[
{“id”：“label”：“Topping”，“pattern”：“type”：“string”}，//x轴
{“id”：“标签”：“切片”，“图案”：“类型”：“编号”}，//y轴-系列0-第1行
{“id”：“标签”：“切片”，“图案”：“类型”：“编号”}，//y轴-系列1-第2行
{“id”：“标签”：“切片”，“图案”：“类型”：“编号”}，//y轴-系列2-第3行
{“id”：“，”role”：“确定性”，“type”：“boolean”}，//确定性role-false=false
],
“行”：[
{“c”：[{“v”：“mushrooooms”，“f”：null}，{“v”：3，“f”：null}，{“v”：4，“f”：null}，{“v”：5，“f”：null}，{“v”：false}]}，
{“c”：[{“v”：“洋葱”，“f”：空}，{“v”：1，“f”：空}，{“v”：2，“f”：空}，{“v”：3，“f”：空}，{“v”：假}，
{“c”：[{“v”：“Olives”，“f”：null}，{“v”：2，“f”：null}，{“v”：3，“f”：null}，{“v”：4，“f”：null}，{“v”：false}，
{“c”：[{“v”：“西葫芦”，“f”：空}，{“v”：1，“f”：空}，{“v”：2，“f”：空}，{“v”：3，“f”：空}，{“v”：假}，}，
{“c”：[{“v”：“Pepperoni”，“f”：null}，{“v”：2，“f”：null}，{“v”：3，“f”：null}，{“v”：4，“f”：null}，{“v”：false}]}
]
});
var chart=new google.visualization.LineChart（document.getElementById（'chart'）；
图表绘制（数据）；
});

感谢您的回复。然而，在上面的编辑中，正如我所提到的，我试图画出一个有4条线的图表（2条虚线，2条实线），并且看到所有的线都没有正确绘制。谢谢你的建议。但我注意到生成的图中有几个不一致的地方。1） 虚线似乎并没有反映代码中提到的颜色，我们打算将它们设置为石灰和黄色，但事实并非如此。2） 在右边的图例中，颜色与实际图形上的颜色完全不同。显然，你没有注意到，你不能同时使用样式和确定性角色——使用
颜色
，而是更改了上面的最后一个片段…太棒了，很有效。注意：前面，我可以使用宽度和高度作为chart.draw（数据，{width:1000，height:800}）指定图形的大小；但是，现在，在指定颜色后，我可以通过创建一个选项对象传入多个选项，如下所示。var options={'title'：'My title'，'width'：1000，'height'：800，colors:colorsArray}；var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；图表绘制（数据、选项）；在编辑中，定义了7列，但每行只有6个值…@WhiteHat，直到现在，我才理解{“v”：false}所指的内容。因此，我们传入它，如果它对应的列是{“id”：“，“role”：“确定性”，“type”：“boolean”}，。我现在开始工作了。但是，这种JSON语法非常严格。是否有一种更简单/更干净的方法可以从REST端点获取数据，并将它们绘制在图表上，而不必将JSON格式化为如此严格的格式。@WhiteHat，我也很抱歉太好奇了，但我还有一个问题要问。可以指定线条的颜色吗？例如，我希望特定系列的虚线和实线具有相同的颜色。没问题，只需添加另一列，使用样式角色，行值可以是颜色的名称，请参阅答案中的链接…@WhiteHat，我已尝试根据您的响应添加颜色（请参阅上面编辑中的JSON代码）。然而，我还没有得到我选择的颜色。如果您能看一下我的JSON表示，并给我一些建议。