示例：构建自定义图例，该图例与数据和图表同步…
google.charts.load('44', { callback: drawChart, packages: ['controls', 'corechart']});function drawChart() { // adapted from a previous example var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']; var data = new google.visualization.DataTable(); data.addColumn('date', 'X'); data.addColumn('number', 'Y1'); data.addColumn('number', 'Y2'); data.addRow([new Date(2016, 0, 1), 1, 123]); data.addRow([new Date(2016, 1, 1), 6, 42]); data.addRow([new Date(2016, 2, 1), 4, 49]); data.addRow([new Date(2016, 3, 1), 23, 486]); data.addRow([new Date(2016, 4, 1), 89, 476]); data.addRow([new Date(2016, 5, 1), 46, 444]); data.addRow([new Date(2016, 6, 1), 178, 442]); data.addRow([new Date(2016, 7, 1), 12, 274]); data.addRow([new Date(2016, 8, 1), 123, 934]); data.addRow([new Date(2016, 9, 1), 144, 145]); data.addRow([new Date(2016, 10, 1), 135, 946]); data.addRow([new Date(2016, 11, 1), 178, 747]); // use view to add various columns for example purposes var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, { calc: function (data, row) { return data.getValue(row, 1) + data.getValue(row, 2); }, type: 'number', label: 'Y3' }, { calc: function (data, row) { return data.getValue(row, 2) - data.getValue(row, 1); }, type: 'number', label: 'Y4' }, { calc: function (data, row) { return data.getValue(row, 1) * 2; }, type: 'number', label: 'Y5' }, { calc: function (data, row) { return data.getValue(row, 2) * 3; }, type: 'number', label: 'Y6' }, { calc: function (data, row) { return data.getValue(row, 1) * 1.5; }, type: 'number', label: 'Y7' }, { calc: function (data, row) { return data.getValue(row, 1) * 1.5; }, type: 'number', label: 'Y8' } ]); var control = new google.visualization.ControlWrapper({ controlType: 'DateRangeFilter', containerId: 'control_div', options: { filterColumnIndex: 0 } }); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div', options: { chartArea: { width: '80%' }, // add colors for legend mapping colors: colorPallette, hAxis: { format: 'MMM', slantedText: false, maxAlternation: 1 }, legend: 'none', width: 320 } }); // add legend marker function addLegendMarker(markerProps) { var legendMarker = document.getElementById('template-legend-marker').innerHTML; for (var handle in markerProps) { if (markerProps.hasOwnProperty(handle)) { legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]); } } document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker); } // chart ready event google.visualization.events.addListener(chart, 'ready', function () { var legend = document.getElementById('legend_div'); // colors from chart var colorPallette = chart.getOption('colors'); // clear previous legend legend.innerHTML = ''; // add legend marker for each Y axis column - skip X axis --> i = 1 for (var i = 1; i < chart.getDataTable().getNumberOfColumns(); i++) { var markerProps = {}; markerProps.index = i; markerProps.color = colorPallette[i - 1]; markerProps.label = chart.getDataTable().getColumnLabel(i); addLegendMarker(markerProps); } // add click event to each legend marker var markers = legend.getElementsByTagName('DIV'); Array.prototype.forEach.call(markers, function(marker) { marker.addEventListener('click', function (e) { var marker = e.target || e.srcElement; if (marker.tagName.toUpperCase() !== 'DIV') { marker = marker.parentNode; } var columnIndex = parseInt(marker.getAttribute('data-columnIndex')); document.getElementById('message_div').innerHTML = 'legend marker clicked = ' + chart.getDataTable().getColumnLabel(columnIndex); }, false); }); }); var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); dash.bind([control], [chart]); dash.draw(view);}#legend_div { text-align: center; width: 320px;}.legend-marker { display: inline-block; padding: 16px 4px 8px 4px;}.legend-marker-color { display: inline-block; height: 12px; width: 12px;}<script src="https://www.gstatic.com/charts/loader.js"></script><div id="dashboard"> <div id="chart_div"></div> <div id="legend_div"></div> <br/> <div id="control_div"></div> <br/> <div id="message_div"></div></div><!-- template for building marker --><script id="template-legend-marker" type="text/html"> <div data-columnIndex="{{index}}"> <div ></div> <span>{{label}}</span> </div></script>
