问题描述
我正在使用 Google Visualization 为我的应用程序创建折线图.我有以下要求:
- 在图例上操作事件(例如 doubleClick,我有以某种方式解决了)
- 将图例包装成两行避免分页(大多数小鬼和必需)
我已经回答了以下问题以获得答案:1) 图例分页问题(Google Interactive chart API)问题:我会避免使用字体大小,因为图例的数量可能会随着时间的推移而增加
2)如何包装 Google 图表上的图例问题:我不希望图例出现在 position:bottom 以外的任何地方.并且 maxLines 解决方案不适用于位置:底部
3) 有什么办法可以避免在 google 可视化图表的图例中分页并在单个页面中以两行显示所有行吗?问题:这是另一个链接,它提到了我的问题,但没有找到有用的答案.
4) 谷歌文档:标题:图表图例文本和样式 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-问题/问题/1286评论:这是我可以看到的链接,谷歌没有提供很多操作图例的属性,也没有太多有用的信息来解决我的问题
6) 谷歌图表图例操作评论:这是唯一的链接,在那里我得到了有关如何解决我的问题的提示,即编写自己的图例.但是除了一个对我没有用的链接之外,没有为文档提供更多链接,没有 jsFiddle 或没有参考链接.
虽然经历了所有这些,但我认为解决我的问题的唯一方法是编写我自己的自定义图例.但我不知道如何编写一个完整的元素添加到 google API.
请指导我完成此操作,欢迎提供任何建议/链接/参考/提示.
谢谢.
示例:构建自定义图例,与数据和图表同步...
google.charts.load('44', {回调:drawChart,包:['控件','corechart']});函数 drawChart() {//改编自前面的例子var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21'];var data = new google.visualization.DataTable();data.addColumn('日期', '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([新日期(2016, 4, 1), 89, 476]);data.addRow([新日期(2016, 5, 1), 46, 444]);data.addRow([新日期(2016, 6, 1), 178, 442]);data.addRow([新日期(2016, 7, 1), 12, 274]);data.addRow([新日期(2016, 8, 1), 123, 934]);data.addRow([新日期(2016, 9, 1), 144, 145]);data.addRow([新日期(2016, 10, 1), 135, 946]);data.addRow([新日期(2016, 11, 1), 178, 747]);//出于示例目的,使用视图添加各种列var view = new google.visualization.DataView(data);view.setColumns([0, 1, 2,{计算:函数(数据,行){返回 data.getValue(row, 1) + data.getValue(row, 2);},类型:'数字',标签:'Y3'},{计算:函数(数据,行){返回 data.getValue(row, 2) - data.getValue(row, 1);},类型:'数字',标签:'Y4'},{计算:函数(数据,行){返回 data.getValue(row, 1) * 2;},类型:'数字',标签:'Y5'},{计算:函数(数据,行){返回 data.getValue(row, 2) * 3;},类型:'数字',标签:'Y6'},{计算:函数(数据,行){返回 data.getValue(row, 1) * 1.5;},类型:'数字',标签:'Y7'},{计算:函数(数据,行){返回 data.getValue(row, 1) * 1.5;},类型:'数字',标签:'Y8'}]);var control = new google.visualization.ControlWrapper({controlType: 'DateRangeFilter',容器 ID: 'control_div',选项: {过滤列索引:0}});var 图表 = 新的 google.visualization.ChartWrapper({图表类型:'线图',容器 ID: 'chart_div',选项: {图表区域:{宽度:'80%'},//为图例映射添加颜色颜色:colorPallette,h轴:{格式:'MMM',slantedText:假,最大交替:1},传说:无",宽度:320}});//添加图例标记函数 addLegendMarker(markerProps) {var legendMarker = document.getElementById('template-legend-marker').innerHTML;for(markerProps 中的 var 句柄){如果(markerProps.hasOwnProperty(句柄)){LegendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);}}document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);}//图表就绪事件google.visualization.events.addListener(图表,'准备好',函数(){var Legend = document.getElementById('legend_div');//图表中的颜色var colorPallette = chart.getOption('colors');//清除之前的图例Legend.innerHTML = '';//为每个 Y 轴列添加图例标记 - 跳过 X 轴 -->我 = 1for (var i = 1; i
#legend_div {文本对齐:居中;宽度:320px;}.legend-marker {显示:内联块;填充:16px 4px 8px 4px;}.legend-marker-color {显示:内联块;高度:12px;宽度:12px;}
<script src="https://www.gstatic.com/charts/loader.js"></script><div id="仪表盘"><div id="chart_div"></div><div id="legend_div"></div><br/><div id="control_div"></div><br/><div id="message_div"></div>
<!-- 用于构建标记的模板--><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>
</script>