如何基于月份对Json数据进行分组并使用Google图表绘制

Question

如何基于月份对Json数据进行分组并使用Google图表绘制

javascriptjsonchartsgoogle-visualization

3

我正在使用谷歌图表插件绘制面积图，使用下面代码中显示的JSON数据，其中包含值和日期，应该基于月份打印图表。

链接显示在图片中在此输入图片描述

如何使用谷歌图表基于月份绘制图表

是否可以使用谷歌图表内置功能来实现，并需要编写一些自定义JavaScript代码来实现？

<script type="text/javascript">
google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'value'],
        [
            "1/Jan/2017",
            28
        ],
        [
            "5/Feb/2019",
            174
        ],
        [
            "8/Mar/2017",
            150
        ],
        [
            "2/Apr/2019",
            174
        ],
        [
            "18/May/2019",
            100
        ],
        [
            "22/Jun/2019",
            5
        ],
        [
            "30/Jul/2019",
            178
        ],
        [
            "28/Aug/2019",
            59
        ],
        [
            "1/Sep/2019",
            87
        ],
        [
            "10/Oct/2019",
            50
        ],
        [
            "15/Nov/2019",
            123
        ],
        [
            "20/Dec/2019",
            108
        ]


    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Date',
            titleTextStyle: {
                color: '#333'
            }
        },
        curveType: 'function',
        legend: {
            position: 'bottom'
        },
        pointSize: 5,
        dataOpacity: 0.5,
        vAxis: {
            minValue: 0
        }

    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

<div id="chart_div" style="width: 100%; height: 500px;"></div>

- Abinandan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

为了将x轴格式化为日期，需要将数据表中的第一列从字符串转换为实际日期...

我们可以使用带有计算列的数据视图来转换日期...

var view = new google.visualization.DataView(data);
view.setColumns([{
  type: 'date',
  label: 'Date',
  calc: function (dt, row) {
    return new Date(dt.getValue(row, 0));
  }
}, 1]);

此外，由于数据不是按日期排序的，我们可以将视图转换回数据表并进行排序...

data = view.toDataTable();
data.sort([{column: 0}]);

请看下面的工作示例...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'value'],
    [
      "1/Jan/2017",
      28
    ],
    [
      "5/Feb/2019",
      174
    ],
    [
      "8/Mar/2017",
      150
    ],
    [
      "2/Apr/2019",
      174
    ],
    [
      "18/May/2019",
      100
    ],
    [
      "22/Jun/2019",
      5
    ],
    [
      "30/Jul/2019",
      178
    ],
    [
      "28/Aug/2019",
      59
    ],
    [
      "1/Sep/2019",
      87
    ],
    [
      "10/Oct/2019",
      50
    ],
    [
      "15/Nov/2019",
      123
    ],
    [
      "20/Dec/2019",
      108
    ]
  ]);
    

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    type: 'date',
    label: 'Date',
    calc: function (dt, row) {
      return new Date(dt.getValue(row, 0));
    }
  }, 1]);
  data = view.toDataTable();
  data.sort([{column: 0}]);

  var options = {
    chartArea: {bottom: 56},
    title: 'Company Performance',
    hAxis: {format: 'MMM', title: 'Date',  titleTextStyle: {color: '#333'} },
    curveType: 'function',
    legend: { position: 'bottom'},
    pointSize: 5,
    dataOpacity: 0.5,
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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