Question

我正在尝试使用谷歌图表在线图上绘制多条线，使用来自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对象的REST API端点。

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"}]}
             ]
     })

Answer 1

添加多行，将多列添加到数据表

数据表应该有一列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}]}
  ]
}

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

当角色值为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', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "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}]}
    ]
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

要添加颜色，请使用colors配置选项...

  colors: ['cyan', 'magenta', 'lime', 'yellow']

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"x","pattern":"","type":"string"},    // x-axis

      {"id":"","label":"y0","pattern":"","type":"number"},   // y-axis - series 0 - line 1

      {"id":"","label":"y1","pattern":"","type":"number"},   // y-axis - series 1 - line 2

      {"id":"","label":"y2","pattern":"","type":"number"},   // y-axis - series 2 - line 3
      {"id":"","role":"certainty","type":"boolean"},         // certainty role - false = dotted

      {"id":"","label":"y3","pattern":"","type":"number"},   // y-axis - series 3 - line 4
      {"id":"","role":"certainty","type":"boolean"},         // certainty role - false = dotted
    ],
    "rows": [
      {"c":[{"v":"A"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]},
      {"c":[{"v":"B"}, {"v":4}, {"v":5}, {"v":6},{"v":false}, {"v":7},{"v":false}]},
      {"c":[{"v":"C"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]}
    ]
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    colors: ['cyan', 'magenta', 'lime', 'yellow']
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

使用Google Charts API创建多线图

1 个答案: