如何用谷歌图表蜡烛棒改变垂直线的颜色？答案

【问题标题】：How to change color of vertical line with google chart candle stick?如何用谷歌图表蜡烛棒改变垂直线的颜色？
【发布时间】：2021-01-25 02:09:58
【问题描述】：

我想更改烛台图的颜色。当设置fallingColor.fill 和risingColor.fill 时，垂直线的颜色与图像一样保持蓝色。

这是我写的代码。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none',
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
      },
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    </script>
  </head>

https://jsfiddle.net/fe26/t6b57vnL/7/

如何更改线条的颜色？

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

您可以使用colors 选项，一个颜色字符串数组。
数组中的每种颜色都应用于数据表中的每个系列。
在发布的示例中，只有一个系列，因此只需要/允许一种颜色。

colors 选项将更改所有图表元素的颜色。
但是，fallingColor 和 risingColor 选项将覆盖 colors 选项。
只留下与colors 选项相同颜色的垂直线。

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ], true);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

你也可以style column role。

样式角色作为附加列添加到数据表中。
将列的值设置为要为每一行显示的颜色/样式。

如果样式值为null，则默认返回上述场景。
但是，如果不是null，它将覆盖上述场景中的两个选项。

注意：您需要提供列标题才能使用样式角色。

var data = google.visualization.arrayToDataTable([
  ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
  ['Mon', 20, 28, 38, 45, 'lime'],
  ['Tue', 31, 38, 55, 66, 'purple'],
  ['Wed', 50, 55, 77, 80, null],
  ['Thu', 77, 77, 66, 50, null],
  ['Fri', 68, 66, 22, 15, 'orange']
]);

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

另一种选择是使用 css，并覆盖垂直线的 svg 元素，
使用 <rect> 元素绘制，带有 --> width="2"
但我会将此作为最后的手段。

#chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
}

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

#chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

您还可以收听图表的'ready' 事件，
并使用您自己的脚本手动更改图表的 svg 元素。
但不建议这样做...

【讨论】：

感谢详细的解释！我用样式角色列的方式重写了我的代码，并且效果很好。