Google 图表：如何在散点图中设置一个点的样式？

Question

通过使用 scatter chart API at Google Charts, together with this example 关于如何更改 shape/color/etc 的一个点，我一直在努力实现这一目标。然而，虽然应该单独设置样式的点出现了，但它并没有根据给定的样式进行更改。这是一个小例子：

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

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X-axis');
    data.addColumn('number', 'A data');
    data.addColumn({'type': 'string', 'role': 'style'});
    data.addColumn('number', 'B data');
    data.addColumn({'type': 'string', 'role': 'style'});

    data.addRows([
      [1.1, 12, null, null, null],
      [1.3, 13, null, null, null],
      [0.1, null, null, 0, null],
      [0.3, null, null, 3, null],
      [1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null],
      [0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}'],

    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Small example'
      },
      hAxis: {title: 'X-axis'},
      vAxis: {title: 'Y-axis'}
    };

    var chart = new google.charts.Scatter(document.getElementById('example_scatter_chart'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }
  </script>
  </head>
  <body>
    <div id="example_scatter_chart" style="width: 500px; height: 500px;"></div>
  </body>
</html>

我在这里错过了什么？

Answer 1

role: 'style' 根本不适用于 Material 图表
google.charts.Scatter

需要使用'packages':['corechart']和google.visualization.ScatterChart

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

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

function drawChart () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X-axis');
  data.addColumn('number', 'A data');
  data.addColumn({'type': 'string', 'role': 'style'});
  data.addColumn('number', 'B data');
  data.addColumn({'type': 'string', 'role': 'style'});

  data.addRows([
    [1.1, 12, null, null, null],
    [1.3, 13, null, null, null],
    [0.1, null, null, 0, null],
    [0.3, null, null, 3, null],
    [1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null],
    [0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}']
  ]);

  var options = {
    width: 800,
    height: 500,
    chart: {
      title: 'Small example'
    },
    hAxis: {title: 'X-axis'},
    vAxis: {title: 'Y-axis'},
    theme: 'material'
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('example_scatter_chart'));

  chart.draw(data, options);
}

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

Google 图表：如何在散点图中设置一个点的样式？

Google Charts: how do I style one point in a scatter chart?

javascript

charts

google-visualization

scatter-plot