代码之家  ›  专栏  ›  技术社区  ›  OmniOwl

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

  •  0
  • OmniOwl  · 技术社区  · 6 年前

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

    我需要实现的是:我有一个谷歌散点图,上面有一堆X/Y点。X和Y是由数字决定的,因此X和Y轴图例自然会显示各种范围内的数字。

    但是,我需要显示标签,而不是显示数字。

    所以如果我有一系列的数字,比如209009-219959,那么我需要显示“MyLabel”,而不是在X轴上显示200000和210000。

    我目前找不到任何方法来做到这一点,我想知道是否有可能,使用内置的谷歌图表功能?

    1 回复  |  直到 6 年前
        1
  •  1
  •   WhiteHat    6 年前

    你可以使用 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>