javascript - 自定义谷歌图表中的轴标签

Question

我确实有以下功能来绘制图表，它表示给定时间的某个值。水平轴应该是日期而不是数字(这对于使趋势线起作用很重要)。我怎样才能做到这一点？

chart_data 包含以下内容

[["Year","accept","error","total"],[{"v":0,"f":"20.09.2018"},1,3,4], 
[{"v":1,"f":"21.09.2018"},4,5,9],[{"v":2,"f":"22.09.2018"},0,7,7], 
[{"v":3,"f":"24.09.2018"},14,14,28],[{"v":4,"f":"25.09.2018"},2,2,4], 
[{"v":5,"f":"26.09.2018"},6,16,22]]

js 函数如下所示:

function drawChart(chart_id, chart_title, chart_data) {

        var data = google.visualization.arrayToDataTable(
            chart_data
        );


        var options = {
            title: chart_title,

            hAxis: {
                title: 'Datum',
                titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            trendlines: {
                0: {
                    type: 'polynomial',
                    degree: 3,
                },
                1:{
                    type: 'polynomial',
                    degree: 3,
                },
                2:{
                    type: 'polynomial',
                    degree: 3,
                } }    // Draw a trendline for data series 0.
        };

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

Answer 1

要自定义轴标签，请使用选项 hAxis.ticks

在这种情况下，我们可以从每一行中提取第一个值用于我们的报价

var chart_data = [
  ["Year","accept","error","total"],
  [{"v":0,"f":"20.09.2018"},1,3,4],
  [{"v":1,"f":"21.09.2018"},4,5,9],
  [{"v":2,"f":"22.09.2018"},0,7,7],
  [{"v":3,"f":"24.09.2018"},14,14,28],
  [{"v":4,"f":"25.09.2018"},2,2,4],
  [{"v":5,"f":"26.09.2018"},6,16,22]
];

// extract first value from each row
var ticks = chart_data.map(function (row) {
  return row[0];
});
ticks.splice(0, 1); // remove column label

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ["Year","accept","error","total"],
    [{"v":0,"f":"20.09.2018"},1,3,4],
    [{"v":1,"f":"21.09.2018"},4,5,9],
    [{"v":2,"f":"22.09.2018"},0,7,7],
    [{"v":3,"f":"24.09.2018"},14,14,28],
    [{"v":4,"f":"25.09.2018"},2,2,4],
    [{"v":5,"f":"26.09.2018"},6,16,22]
  ];

  // extract first value from each row
  var ticks = chart_data.map(function (row) {
    return row[0];
  });
  ticks.splice(0, 1); // remove column label

  var data = google.visualization.arrayToDataTable(chart_data);

  var options = {
    title: 'chart_title',
    hAxis: {
      ticks: ticks,  // custom labels
      title: 'Datum',
      titleTextStyle: {color: '#333'}
    },
    vAxis: {minValue: 0},
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
      },
      1:{
        type: 'polynomial',
        degree: 3,
      },
      2:{
        type: 'polynomial',
        degree: 3,
      }
    }
  };

  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>