首页 文章

Google图表日历 - 将渐变比例值更改为字符串

提问于
浏览 次
1

我正在使用谷歌图表日历，我想修改渐变值 - 最小值和最大值 . 从official documentation我可以通过修改colorAxis来做到这一点：

{minValue: 0, maxValue: 5,  colors: ['#FF0000', '#00FF00']}

但它只支持类型编号，我更倾向于使用字符串来表示它，类似于minValue的“最低值”和maxValue的“最高值” .

有什么建议我该怎么办？

enter image description here

charts google-visualization

1 回答

  • 1

    为了计算'Activity'列上的渐变，
    minValue 和 maxValue 的选项只能是数字...

    但如果您只想更改图例上显示的标签，
    这可以在图表的 'ready' 事件上手动完成

    请参阅以下工作代码段...

    google.charts.load('current', {
  packages: ['calendar']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'date', id: 'Date'});
  dataTable.addColumn({type: 'number', id: 'Activity'});
  dataTable.addRows([
    [new Date(2018, 0, 3), 1],
    [new Date(2018, 0, 16), 2],
    [new Date(2018, 1, 6), 3],
    [new Date(2018, 1, 15), 4],
    [new Date(2018, 1, 25), 5]
  ]);
  var chart = new google.visualization.Calendar(document.getElementById('chart_div'));
  var options = {
    colorAxis: {minValue: 0, maxValue: 5,  colors: ['#FF0000', '#00FF00']},
    width: 1000
  };
  google.visualization.events.addListener(chart, 'ready', function () {
    if ($('#chart_div text').length > 1) {
      $($('#chart_div text').get(0)).text('Lowest');
      $($('#chart_div text').get(1)).text('Highest');
    }
  });
  chart.draw(dataTable, options);
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
    回复于

相关问题