javascript - 如何使用 react-google-charts 设置单个点的样式？

Question

文档是 here .任务是仅显示某些点，而不是所有点。

尝试:

  <Chart 
    width="100%"
    height="400px"
    chartType="AreaChart"
    legend_toggle
    data={[
      [
        'Date',
        ...Object.keys(pieChart),
        { type: 'string', role: 'style' }
      ],
      ...estimates.map(item => {
        return [ 
          item.td, 
          ...Object.keys(pieChart).map(country => item.countries.find(a => a.country == country) ? item.countries.find(a => a.country == country).value * 1 : undefined),
          versions.find(version => {
            return version.ts.substr(0, 10) == item.td
          }) ? 'point { size: 18; shape-type: star; fill-color: #a52714; }' : null
        ]
      })
    ]}
   />

看起来不错:

但是样式永远不会应用，所有的点都被隐藏了。有任何想法吗？

Answer 1

在面积图上，默认情况下点是隐藏的。

为了显示一个点，或者自定义一个点，
需要将选项 pointSize 设置为大于 0 的值...

pointSize: 4

如果您只想为具有自定义点的系列显示点，
在 series 选项中设置 pointSize...

series: {
  5: {
    pointSize: 4
  }
}

请参阅以下工作片段，
虽然不是 Angular ，但工作方式相同......

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'United States', 'Germany', 'Japan', 'Italy', 'Sweden', 'Other', {role: 'style', type: 'string'}],
    ['2019-09-03', 19507, 18093, 16075, 11548, 10650, 160826, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
    ['2019-09-04', 19507, 18093, 16075, 11548, 10650, 160826, 'point { size: 18; shape-type: star; fill-color: #a52714; }']
  ]);

  var options = {
    series: {
      5: {
        pointSize: 4
      }
    }
  };

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

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