javascript - 如何自定义Google图表中特定点的颜色

Question

如何自定义数据图表上特定日期点的颜色 Google analytics embedded API 。 我读完Google Visualization API documentation后我尝试了这段代码，但它不起作用:

var sessionsOverMonth = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
            'dimensions': 'ga:date',
            'metrics': 'ga:sessions',
            'start-date': '30daysAgo',
            'end-date': 'yesterday',
        },
        chart: {
            type: 'LINE',
            container: 'sessions-over-month',
            options: {width: '100%' ,
                series: {
                    0: { pointShape: { type: 'star', sides: 5, dent: 0.05 }},
                }
            }
        }
    });

如何捕获图表上的特定日期并对其进行自定义？

Answer 1

series选项中的设置将影响整个数据系列或数据列

要更改系列中的特定点，需要使用 column role ,
具体来说 --> 风格

以下工作片段展示了 google-visualization 库中的操作方式

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'y', {role: 'style'}],
    [new Date(2017, 2, 1), 0, null],
    [new Date(2017, 2, 2), 1, null],
    [new Date(2017, 2, 3), 2, 'point {size: 16; shape-type: star; fill-color: #d81b60;}'],
    [new Date(2017, 2, 4), 3, null],
    [new Date(2017, 2, 5), 4, null],
    [new Date(2017, 2, 6), 5, null]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    pointSize: 6
  });
}

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