给定一定范围的数字,显示标签而不是轴值?

时间:2019-01-21 18:15:12

标签: javascript charts google-visualization

所以我有一个有趣的用例,需要在工作中完成,此刻我有些茫然。

我需要实现的是:我有一个带有大量X / Y点的Google Chart散点图。 X和Y由数字决定,因此X和Y轴图例自然会显示各种范围内的数字。

但是,除了显示数字,我还需要显示标签。

因此,如果我有一个范围为209009-219959的数字,则无需在X轴上显示200,000和210,000,我需要显示“ MyLabel”。

我目前找不到任何方法,并且想知道是否可以使用内置的Google Chart函数来做到这一点?

1 个答案:

答案 0 :(得分:1)

您可以使用ticks选项,该选项采用值或对象的数组。
使用对象符号,您可以提供值(v:),
以及格式化后的值(f:)。

hAxis: {
  ticks: [
    {v: 201000, f: 'My Label A'},
    {v: 202000, f: 'My Label B'},
    {v: 203000, f: 'My Label C'},
    {v: 204000, f: 'My Label D'},
  ]
},

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [201000, 54000],
    [202000, 55000],
    [203000, 56000],
    [204000, 57000]
  ]);

  var options = {
    chartArea: {
      bottom: 48,
      height: '100%',
      left: 64,
      right: 48,
      top: 48,
      width: '100%'
    },
    hAxis: {
      ticks: [
        {v: 201000, f: 'My Label A'},
        {v: 202000, f: 'My Label B'},
        {v: 203000, f: 'My Label C'},
        {v: 204000, f: 'My Label D'},
      ]
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  chart.draw(data, options);
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_scatter"></div>