Question

在Google Charts上使用scatter chart API，以及this example如何更改一个点的形状/颜色/等，我一直在尝试很难做到这一点。然而，虽然应该单独设计样式的点显示，但它不会根据给定的样式进行更改。这是一个小例子：

<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

gsub("[[:punct:]]", "", s)根本不适用于材料图表 role: 'style'

需要使用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);
}

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

1 个答案: