xas 的 JavaScript Google Chart 划分显示不需要的分布

Question

我正在使用 JavaScript 和 Google Chart 绘制柱形图，每周显示符合 SLA 标准的工单。所以我对 x-as 的期望是整周的数字，但我得到的是除数（见下图）。我能做些什么来改变它？

要创建柱形图，我使用以下数据集：

[[1, 7, 4, 5, 0, 0, 1]
,[2, 12, 2, 9, 1, 1, 0]
,[3, 10, 0, 1, 1, 1, 0]
,[4, 4, 3, 0, 1, 0, 0]
,[5, 7, 5, 0, 0, 0, 0]
,[6, 6, 1, 0, 0, 0, 0]
,[7, 11, 4, 0, 0, 0, 0]
,[8, 11, 2, 0, 0, 0, 1]]

要将这些数据绘制到图表中，我使用以下代码：

 console.info('Start ticketsSolvedPerWeek SLA')
    console.info(ds.Data)
    // (A)Define column headers
    var dataNew = new google.visualization.DataTable()
    dataNew.addColumn('number', 'Weeknumber');
    dataNew.addColumn('number', '00');
    dataNew.addColumn('number', '01');
    dataNew.addColumn('number', '02');
    dataNew.addColumn('number', '03');
    dataNew.addColumn('number', '04');
    dataNew.addColumn('number', '05');

    dataNew.addRows(ds.Data)

    //(3) Set graph options
    var options = {
        title: ds.title,
        hAxis: {
            title: 'Weeknumber'
        },
        vAxis: {
            title: 'Tickets'
        },
        trendlines: {
            0: {
                type: 'polynomial',
                degree: 3,
                visibleInLegend: true,
                pointSize: 20, // Set the size of the trendline dots.
                opacity: 0.1
            }
        },
        width: 750,
        height: 500,
    };

    //(4) Draw Graph
    var slaChart = new google.visualization.ColumnChart(
    document.getElementById('ticketsSLA'));
    slaChart.draw(dataNew, options);

Answer 1

您可以使用选项

hAxis.ticks

提供自定义轴标签

该选项采用与数据表轴列相同类型的值数组

在以下工作片段中，
数据表方法

getDistinctValues(columnIndex)

用于为

ticks

创建数组

google.charts.load('current', {
    packages: ['corechart']
}).then(function () {
  var dataNew = new google.visualization.DataTable()
  dataNew.addColumn('number', 'Weeknumber');
  dataNew.addColumn('number', '00');
  dataNew.addColumn('number', '01');
  dataNew.addColumn('number', '02');
  dataNew.addColumn('number', '03');
  dataNew.addColumn('number', '04');
  dataNew.addColumn('number', '05');

  dataNew.addRows([
    [1, 7, 4, 5, 0, 0, 1]
    ,[2, 12, 2, 9, 1, 1, 0]
    ,[3, 10, 0, 1, 1, 1, 0]
    ,[4, 4, 3, 0, 1, 0, 0]
    ,[5, 7, 5, 0, 0, 0, 0]
    ,[6, 6, 1, 0, 0, 0, 0]
    ,[7, 11, 4, 0, 0, 0, 0]
    ,[8, 11, 2, 0, 0, 0, 1]
  ]);

  var options = {
      title: 'title',
      hAxis: {
          ticks: dataNew.getDistinctValues(0),
          title: 'Weeknumber'
      },
      vAxis: {
          title: 'Tickets'
      },
      trendlines: {
          0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20,
              opacity: 0.1
          }
      },
      width: 750,
      height: 500,
  };

  var slaChart = new google.visualization.ColumnChart(
  document.getElementById('ticketsSLA'));
  slaChart.draw(dataNew, options);
});

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