>操纵传说上的事件(如doubleClick,我有
以某种方式解决)
>将传说分成两行,避免分页(大多数imp和必需)
我已经完成了以下问题以获得我的答案的解决方案：
1)Issue with legend pagination (Google Interactive chart API)
问题：我会避免使用font-size,因为传说的数量可能会随着时间的推移而增加
2)How the legends on Google charts can be wrapped
问题：我不希望传说出现在其他地方而不是位置：底部.并且maxLines解决方案不适用于position：bottom
3)Is there any way I can avoid pagination in legends of a google visualisation chart and show all the lines in two lines in a single page?
问题：这是另一个链接,它提到了我的问题,但没有找到有用的答案.
4)Google文档：
标题：图表图例文字和样式chdl,chdlp,chdls [所有图表]
https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs
标题：设置图表边缘
https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all—-charts
标题：工具提示
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction
评论：这些是很少的谷歌文档链接,其中提到了很少的图例操作属性,但它们仍然无法解决我的问题.
5)https://github.com/google/google-visualization-issues/issues/1286
评论：这是我可以看到的链接,谷歌没有提供很多属性来操纵传说,也没有太多有用的信息来解决我的问题
6)Google charts legend manipulation
评论：这是唯一的链接,在那里我得到了关于如何解决我的问题的提示,即编写自己的传说.但是没有提供文档链接,没有jsFiddle或没有参考链接,除了一个对我没用的链接.
虽然经历了所有这些,我只能看到解决我的问题的解决方案是编写我自己的自定义传说.但我不知道如何编写一个完整的元素添加到谷歌API.
谢谢.
解决方法
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,1),1,123]);
data.addRow([new Date(2016,6,42]);
data.addRow([new Date(2016,2,4,49]);
data.addRow([new Date(2016,3,23,486]);
data.addRow([new Date(2016,89,476]);
data.addRow([new Date(2016,5,46,444]);
data.addRow([new Date(2016,178,442]);
data.addRow([new Date(2016,7,12,274]);
data.addRow([new Date(2016,8,123,934]);
data.addRow([new Date(2016,9,144,145]);
data.addRow([new Date(2016,10,135,946]);
data.addRow([new Date(2016,11,747]);
// use view to add varIoUs columns for example purposes
var view = new google.visualization.DataView(data);
view.setColumns([0,{
calc: function (data,row) {
return data.getValue(row,1) + data.getValue(row,2);
},type: 'number',label: 'Y3'
},2) - data.getValue(row,1);
},label: 'Y4'
},1) * 2;
},label: 'Y5'
},2) * 3;
},label: 'Y6'
},1) * 1.5;
},label: 'Y7'
},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>
