如何为Google折线图/ Google折线图图例操作编写自己的自定义图例

我正在使用Google Visualization为我的应用程序创建折线图。我有以下要求:


处理图例事件(例如doubleClick,我已通过某种方式解决了该事件)

将图例两行包装以避免分页(大多数imp和必填项)

我经历了以下问题,以找到答案的解决方案:1)图例分页问题(Google交互式图表API) 问题:我会避免使用字体大小,因为图例的数量可能会随着时间的推移而增加


2)如何包装Google图表上的图例 问题:我不希望将图例放置在position:bottom之外的其他位置。而且maxLines解决方案不适用于以下位置:底部


3)有什么方法可以避免在Google可视化图表的图例中显示分页,并在单个页面中以两行显示所有行? 问题:这是另一个链接,其中提到了我的问题,但未找到有用的答案。


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-简介 注释:这些是很少的google文档链接,其中很少提及图例操作属性,但仍然不能解决我的问题。


5)https://github.com/google/google-google-visualization-issues/issues/1286 评论:这是我可以看到的链接,google并没有提供许多用于处理图例的属性,也没有太多有用的信息可解决我的问题


6)Google图表图例处理 评论:这是唯一的链接,在这里我得到了有关如何解决问题的提示,即编写自己的图例。但是除了文档链接之外,没有其他文档链接,jsFiddle或ref链接对我没有用。


在经历所有这些之后,我只能看到解决我的问题的解决方案是编写自己的自定义图例。但是我不知道如何编写添加到Google API的完整元素。


请指导我进行此操作,欢迎任何建议/链接/参考/提示。


慕的地10843
浏览 416回答 2
2回答

至尊宝的传说

if ($("#source svg text[text-anchor='end']").length > 0){        var n = $("#source svg text[text-anchor='end']").length;        $("#source svg text[text-anchor='end']")[n-5].innerHTML = "";        $("#source svg text[text-anchor='end']")[n-4].innerHTML = "Create your own legend";        $("#source svg text[text-anchor='end']")[n-3].innerHTML = "Create your own legend";        $("#source svg text[text-anchor='end']")[n-2].innerHTML = "Create your own legend";        $("#source svg text[text-anchor='end']")[n-1].innerHTML = "";    }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript