如何编写自己的谷歌折线图/谷歌折线图传说操作的自定义图例 [英] How to write your own custom legends for google line chart/ Google line chart legend manipulation
问题描述
我正在使用Google Visualization为我的应用程序创建折线图。我有以下要求：
- 操作图例中的事件（如doubleClick，我有
解决） - 将传说分成两行，避免分页（大多数小问题和必填项）
以下问题获得我的答案的解决方案：
1）问题与传奇分页（谷歌交互式图表API）
问题：我会避免玩字体大小，因为随着时间的推移传说的数量可能会增加
2） Google图表上的图例可以如何包装 a>
问题：我不希望传说在其他地方比在这个位置：底部。而maxLines的解决方案在位置上不起作用：bottom
3）
问题：这是另一个链接，它提到了我的问题，但没有找到有用的答案。
$ b
4）Google文档：
标题：图表图例文本和样式chdl，chdlp，chdls [所有图表]
https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs
标题：设置图表Margines
https： //developers.google.com/chart/image/docs/ chart_params＃chart-margins-chma-all ----图表
标题：工具提示
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图表图例处理
Comme nt：这是唯一的链接，我得到了关于如何解决我的问题的提示，即编写自己的传奇故事。但没有更多的链接提供文档，没有jsFiddle或没有ref链接除了一个链接，这对我没有用。
虽然经历了所有这些，我可以看到唯一的解决方案来解决我的问题是写我自己的自定义传说。但我不知道如何编写一个完整的元素添加到谷歌API。
请指导我通过这个，任何建议/链接/参考/提示是受欢迎的。
谢谢。
这与数据和图表同步......
google.charts.load（） '44'，{callback：drawChart，packages：['controls'，'corechart']}）; function drawChart（）{//从前面的例子改变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]）; //使用视图为示例添加各种列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：'数字'，标签：'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％'}，//为图例颜色添加颜色：colorPallette，hAxis： {format：'MMM'，slantedText：false，maxAlternation：1}，图例：'none'，width：320}}）; //添加图例标记函数addLegendMarker（markerProps）{var legendMarker = document.getElementById（'template-legend-marker'）。innerHTML;对于（markerProps中的var处理）{if（markerProps.hasOwnProperty（handle））{legendMarker = legendMarker.replace（'{{'+ handle +'}}'，markerProps [handle]）; }} document.getElementById（'legend_div'）。insertAdjacentHTML（'beforeEnd'，legendMarker）; } //图表就绪事件google.visualization.events.addListener（图表'ready'，function（）{var legend = document.getElementById（'legend_div'）; //来自图表的颜色var colorPallette = chart.getOption（'colors '）; //清除上一个图例legend.innerHTML =''; //为每个Y轴列添加图例标记 - 跳过X轴 - > 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 ）;} //向每个图例标记添加点击事件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.par entNode;} 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 -居中对齐; width：320px;}。legend-marker {display：inline-block; padding：16px 4px 8px 4px;}。legend-marker-color {display：inline-block;身高：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><！ - 建筑物标记模板 - >< script id =template-legend-markertype =text / HTML> < div class =legend-markerdata-columnIndex ={{index}}> < div class =legend-marker-colorstyle =background-color：{{color}}>< / div> <跨度> {{标签}}< /跨度> < / div>< / script>
I am using Google Visualisation to create line charts for my application. I have following requirements in that :
- Manipulating events on legends (like doubleClick, which I have solved somehow)
- Wrapping the legends in two rows avoiding pagination (Most imp and required)
I have gone through the following questions to get solution for my answers: 1) Issue with legend pagination (Google Interactive chart API) Issue : I would avoid playing with font-size because the number of legends may increase over time
2)How the legends on Google charts can be wrapped Issue: I do not want legends to be anywhere else than at the position:bottom. And maxLines solution does not work on 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? Issue: This is another link, which mentions my problem, but no useful answers found on it.
4) Google Documentation : Heading : Chart Legend Text and Style chdl, chdlp, chdls [All charts] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Heading : Setting Chart Margines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Heading : Tooltips https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction Comment : These are few google documentation links where few legend manipulating properties are mentioned, but still they does not solve my problem.
5)https://github.com/google/google-visualization-issues/issues/1286 Comment : This is the link where I can see that, google has not provided many properties to manipulate legends, and no much useful information to solve my issue
6) Google charts legend manipulation Comment : This is the only link, where I got a hint about how to solve my issue i.e. writing own legends. But there is no more links provided for documentation, no jsFiddle or no ref links apart from one link which is not useful for me.
While gone through all these, I can see only solution to solve my problem is to write my own custom legends. But I have no idea about how to write a complete element adding to google API.
Please guide me to go through this, any suggestions/links/refs/hints are welcome.
Thank you.
Example: Build custom legend, which syncs with data and chart...
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>
这篇关于如何编写自己的谷歌折线图/谷歌折线图传说操作的自定义图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
