如何编写自己的谷歌折线图/谷歌折线图传奇操作
我正在使用Google Visualization为我的应用程序创build折线图。 我有以下要求：
- 操纵传说中的事件（如doubleClick，我已经解决了这个问题）
- 用两行包裹传说避免分页（最imp和必需）
我已经经历了以下问题，以获得解答我的答案：1） 与传奇分页问题（谷歌交互式图表API）问题：我会避免玩字体大小，因为传说的数量可能随着时间的推移增加
2） 谷歌图表上的传说如何可以包装问题：我不想传说在任何地方，而不是在位置：底部。 而maxLines解决scheme不适用于位置：底部
3） 有什么办法可以避免在谷歌可视化图表的传说中分页，并在一个页面中显示两行的所有行？ 问题：这是另一个提到我的问题的链接，但没有find有用的答案。
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-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） 谷歌图表传奇操纵评论：这是唯一的链接，我得到了一个关于如何解决我的问题，即写作自己的传说暗示。 但没有更多的链接提供的文档，没有jsFiddle或没有ref链接除了一个链接，这是没有用的。
虽然经历了所有这些，我只能看到解决scheme来解决我的问题是写我自己的自定义传说。 但我不知道如何编写一个完整的元素添加到谷歌API。
请引导我通过这个，任何build议/链接/参考/提示是受欢迎的。
谢谢。
示例：构build自定义图例，与数据和图表同步
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="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>
