热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

谷歌图表vAxis打勾多种颜色

如何解决《谷歌图表vAxis打勾多种颜色》经验,为你挑选了1个好方法。

我使用了颜色

vAxis: {
                    title: 'Rating (scale of 1-10)'
                    , ticks: [{
                        v: 8.5
                        , f: 'A'
                    }, {
                        v: 4.5
                        , f: 'B'
                    }, {
                        v: 2
                        , f: 'C'
                    }]
                    , gridlines: {
                        color: "#00FF00"
                    }
                }

如何在网格线中放置多种颜色,我需要a,b和c不同的颜色,

提前致谢



1> WhiteHat..:

没有可以设置的标准选项

但您可以
在图表'ready'事件触发 时手动更改颜色

网格线将是元素,

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

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');
  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1],
    [{v: [9, 0, 0], f: '9 am'}, 2],
    [{v: [10, 0, 0], f:'10 am'}, 3],
    [{v: [11, 0, 0], f: '11 am'}, 4],
    [{v: [12, 0, 0], f: '12 pm'}, 5],
    [{v: [13, 0, 0], f: '1 pm'}, 6],
    [{v: [14, 0, 0], f: '2 pm'}, 7],
    [{v: [15, 0, 0], f: '3 pm'}, 8],
    [{v: [16, 0, 0], f: '4 pm'}, 9],
    [{v: [17, 0, 0], f: '5 pm'}, 10],
  ]);

  var optiOns= {
    title: 'Motivation Level Throughout the Day',
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)',
      ticks: [
        {v: 8.5, f: 'A'},
        {v: 4.5, f: 'B'},
        {v: 2, f: 'C'}
      ]
    }
  };

  var gridlines = [
    '#ff0000',
    '#00ff00',
    '#0000ff'
  ];

  var cOntainer= document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    var gridlineIndex = 0;
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect, index) {
      if (rect.getAttribute('height') === '1') {
        rect.setAttribute('fill', gridlines[gridlineIndex]);
        gridlineIndex++;
      }
    });
  });
  chart.draw(data, options);
}


推荐阅读
author-avatar
黄石幽兰it
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有