在Google条形图中自定义hAxis刻度线颜色

博格丹

是否可以更改xAxis栏上刻度线的颜色?

看到这张图片

我想从2000绿色,2500橙色和3000红色中剔除。

我已经尝试过了,但是似乎不起作用:

ticks: [500, 1000, 1500, {v: 2000, color: "Green"}, {v: 2500, color: "Orange"}, {v: 3000, color: "Red"}]

ticks: [500, 1000, 1500, [2000, "Green"], [2500, "Orange"], [3000, "Red"]]

任何帮助表示赞赏,谢谢!

白帽

没有用于更改单个刻度线颜色的配置选项

但是您可以手动更改图表'ready'事件,
请参见以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);

  google.visualization.events.addListener(chart, 'ready', changeTickColors);

  chart.draw(data, {
    legend: {
      alignment: 'end',
      position: 'top'
    },
    hAxis: {
      ticks: [500, 1000, 1500, 2000, 2500, 3000]
    }
  });

  function changeTickColors() {
    var tickColors = {
      "2,000": "green",
      "2,500": "orange",
      "3,000": "red"
    };

    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        if (tickColors.hasOwnProperty(label.textContent)) {
          label.setAttribute('fill', tickColors[label.textContent]);
        }
      }
    });
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

JFreeChart条形图自定义颜色?

如何给熊猫/ matplotlib条形图自定义颜色

熊猫条形图中的自定义图例(matplotlib)

在Material Google条形图中更改X轴刻度

条形图中的颜色

在堆积的条形图中使用自定义调色板

在amCharts的堆积条形图中添加自定义文本标签

自定义刻度线的颜色图

R设置条形图的自定义颜色

是否可以将自定义图片用作条形图中的条形?

如何在刻度线之间对齐条形图中的条形(matplotlib)?

条形图中的自定义时间间隔在条形之间没有间隔

按组自定义条形图上的颜色

自定义样式的Google条形图

情节:如何在堆积的条形图中自定义颜色?

如何自定义堆叠条形图中的颜色

具有对数刻度x轴的条形图的自定义科学轴单位

自定义条形图中的高度matplotlib

自定义分组条形图ggplot上的条形颜色?

R:条形图中的x轴-条形图中间的x轴和中心刻度线的宽度

自定义格子条形图中的条的边框图

如何自定义融合图的堆叠条形图中的显示值?

条形图中的自定义行(多个条形图)

Google Material Chart柱形图(条形图)自定义列颜色不起作用

使用 Pandas 自定义条形图中的标签

如何在同步条形图中放置自定义形状的条形,颤动?

如何在使用 ggpplot2 创建的条形图的条形图中制作和自定义部分?

将分组条形图中每个条形图的颜色更改为自定义颜色

在 D3 分组条形图中自定义网格线