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

Question

How to customize color of specific date point on data chart from Google analytics embedded API . After I read Google Visualization API documentation I tried this code but it didn't work:

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

how to catch specific date on chart and customize it ?

Answer 1

settings within the series option, will affect the entire data series, or column of data

to change a specific point within a series, requires using a column role ,
specifically --> style

the following working snippet shows how in the google-visualization library

 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>