javascript - 在谷歌图表中显示 json 正文

Question

我对图表有很大的疑问。我试图在谷歌图表中显示一些 json 值，但我总是会出错。从 JSON 正文中，我只需要图表上个月的“全部购买”和“日期”。我见过的所有例子，他们已经有了一个静态的自定义 Jsonbody。我希望你能帮助我并告诉我我做错了什么:(。

这是我的 jsFile，带有 API 响应:

    request(requestApi, function (error, response, body) {
    if (error) {
    return res.reject(error);
    }

    var dataJson = JSON.parse(body);

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

    function drawChart() {
        var data = new google.visualization.DataTable(dataJson);
        data.addRows([
        [{v: dataJson[0].total_purchases.purchases_all, 
          f: dataJson[0].total_purchases.date }]
        ]);

        var options = {
            chart: {
                title: 'chart '
            },
            hAxis: {
                title: 'week'
            },
            vAxis: {
                title: 'counts',
                viewWindowMode: 'explicit',
                viewWindow: {
                    max: 300,
                    min: 0
                }
            },
            bars: 'vertical',
            width: 600,
            height: 500
        };


    var chart = new google.charts.Bar(document.getElementById('the_chart'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

    }

API 的响应是这样的:

    {
      "total_purchases": [
      {
        "number": 0,
        "purchases_website": 11,
        "purchases_app": 10,
        "purchases_all": 21,
        "date": "2016-07-01"
      },
      {
        "number": 3,
        "purchases_website": 19,
        "purchases_app": 32,
        "purchases_all": 51,
        "date": "2016-05-01"
      },
     {
        "number": 1,
        "purchases_website": 31,
        "purchases_app": 34,
        "purchases_all": 65,
        "date": "2016-06-01"
      },
     {
        "id": 2,
        "purchases_website": 20,
        "purchases_app": 12,
        "purchases": 32,
        "date": "2016-08-01"
     }
    ]
   }

当我控制台记录 JSON.parse(body) 我得到这个:

imageHERE

Answer 1

由于 json 不是 google 期望的格式，
手动加载数据表

1. 创建空白数据表
2. 添加列
3. 使用来自 json 的数据添加行

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var dataJson = {"total_purchases": [
      {
        "number": 0,
        "purchases_website": 11,
        "purchases_app": 10,
        "purchases_all": 21,
        "date": "2016-07-01"
      },
      {
        "number": 3,
        "purchases_website": 19,
        "purchases_app": 32,
        "purchases_all": 51,
        "date": "2016-05-01"
      },
      {
        "number": 1,
        "purchases_website": 31,
        "purchases_app": 34,
        "purchases_all": 65,
        "date": "2016-06-01"
      }
    ]};

    // create blank data table
    var data = new google.visualization.DataTable();

    // add columns: Type      Label
    data.addColumn('string', 'date');
    data.addColumn('number', 'website');
    data.addColumn('number', 'app');
    data.addColumn('number', 'all');

    // add each row from json
    dataJson.total_purchases.forEach(function (row) {
      data.addRow([
        row.date,
        row.purchases_website,
        row.purchases_app,
        row.purchases_all
      ]);
    });

    // sort data table
    data.sort([{column: 0}]);

    var options = {
      chart: {
        title: 'chart '
      },
      hAxis: {
        title: 'week'
      },
      vAxis: {
        title: 'counts',
        viewWindowMode: 'explicit',
        viewWindow: {
          max: 300,
          min: 0
        }
      },
      bars: 'vertical',
      width: 600,
      height: 500
    };

    var chart = new google.charts.Bar(document.getElementById('the_chart'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

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

注意事项:

1. 以上使用离散轴(第一列是类型:'string')
   为了使用连续轴(类型:'datetime')，
   您可能想要更改 json "date" 值的格式，
   来自 --> "2016-06-01"
   至 --> "06/01/2016"
   载入数据表时，
   当前格式将被时区偏移并且可能显示不正确的日期，
   它还可能导致数据点无法与网格线正确对齐

如果使用类型:'datetime'，第一列将变为...

    data.addColumn('datetime', 'date');

添加行语句将是...

  data.addRow([
    new Date(row.date),
    row.purchases_website,
    row.purchases_app,
    row.purchases_all
  ]);

1. 建议改用核心图表，有几个配置选项不适用于material图表

Tracking Issue for Material Chart Feature Parity #2143

core --> google.visualization.ColumnChart -- 使用 --> packages: ['corechart']

material --> google.charts.Bar -- 使用 --> packages: ['bar']

有一个选项可以使核心图表接近 Material 的外观和感觉

主题:'material'