在烛台 Google 图表上添加星形图标答案

【问题标题】：Add star icon on candlestick Google Chart在烛台 Google 图表上添加星形图标
【发布时间】：2021-08-19 04:46:35
【问题描述】：

我正在尝试使用 Google Charts api 将星形图标添加到烛台图表，但我遇到了困难。如果有人可以帮助我：

我在这个谷歌页面上看到了它：https://developers.google.com/chart/interactive/docs/points https://i.stack.imgur.com/blkeK.png

尽管我添加了 css 并定义了列类型，但它不起作用。

以下是我的代码，但这是 jsfiddle 中的测试链接：https://jsfiddle.net/wd4egpo1/

<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([
    ['x', 'n1', 'n2', 'n3', 'n4', {label:'point', role:'style', type:'string'}],
      ['Mon', 20, 28, 38, 45, undefined],
      ['Tue', 31, 38, 55, 66, undefined],
      ['Wed', 50, 55, 77, 80, undefined],
      ['Thu', 77, 77, 66, 50, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
      ['Fri', 68, 66, 22, 15, undefined]
      // Treat first row as data as well.
    ], false);

    var options = {
      legend:'none'
    };

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

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

【问题讨论】：

标签： javascript svg canvas graphics google-visualization

【解决方案1】：

您看到的example 仅适用于包含点的line 和scatter 图表。该文档中提供了这些点的自定义。 Candlestick 图表没有任何要点，这就是它不起作用的原因。您仍然可以通过提供样式对象来在数据级别提供图表样式，如下所示：

var data = google.visualization.arrayToDataTable([
    ['x', 'n1', 'n2', 'n3', 'n4', {'type': 'string', 'role': 'style'}],
      ['Mon', 20, 28, 38, 45, null],
      ['Tue', 31, 38, 55, 66, null],
      ['Wed', 50, 55, 77, 80, null],
      ['Thu', 77, 77, 66, 50, '{ size: 18; shape-type: star; fill-color: #a52714; }'],
      ['Fri', 68, 66, 22, 15, null]
      // Treat first row as data as well.
    ], false);

在上面，不会应用形状，但可以应用填充颜色。如果您想要更多选项，特别是更改图表颜色，那么您应该在options 中尝试以下操作：

var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          }
        };

另请参阅CandlestickChart 的文档，该文档有更多选项和更改颜色的示例example。

【讨论】：

非常感谢@wehab 的回复。我仍然需要在图表上的特定点插入某种点/图标。知道我该怎么做吗？