示例：构建自定义图例，该图例与数据和图表同步…
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 class="legend-marker" data-columnIndex="{{index}}">
<div class="legend-marker-color" style="background-color: {{color}}"></div>
<span>{{label}}</span>
</div>
</script>
602392714
清零编程群