如何使用 google 图表烛台更改垂直线的颜色？

Question

我想更改烛台图表的颜色。当设置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/

如何更改线条的颜色？

Answer 1

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

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

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

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.

样式角色作为附加列添加到数据 table。
将列的值设置为您希望为每一行显示的颜色/样式。

如果样式值为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']
]);

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

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;
}

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

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 元素。
但不推荐这样做...

如何使用 google 图表烛台更改垂直线的颜色？

How to change color of vertical line with google chart candle stick?

charts

google-visualization