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，
具体而言 - ＆gt; 风格

以下工作代码段显示了google-visualization库

中的内容

＆＃13;

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
  });
}

＆＃13;

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

＆＃13;

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

1 个答案: