highcharts 提示框样式
来源:互联网 发布:淘宝贷款需要本人吗 编辑:程序博客网 时间:2024/05/19 17:49
困扰我一下午的问题,highcharts 提示框中的内容经过格式化以后效果都是黑白色比较难看效果如下。
看官方文档对tooltip 中formatter的说明:
formatter格式化程序 :Function
格式化tooltip的文本的回调函数。返回false可对数据序列上特定的点禁用tooltip。
支持一个HTML子集。tooltip的HTML元素会被解析和转换成SVG,因此这不是完全的HTML渲染器。支持以下这些标记:<b>
,<strong>
,<i>
,<em>
,<br/>
,<span>
.Spans标记可以用style
属性来设定样式,但是只有和SVG共享的与文本相关的CSS会被处理。
从 version 2.1开始,tooltip(提示框)可通过shared
选项被多个数据序列共享。格式化程序中的可用数据根据tooltip是否被共享而有些不同。在被共享的tooltip中,除了x
这个所有数据节点通用的属性之外的所有属性,都被保存在一个数组this.points
中。
说明其中是支持html标签,和style属性,但是不论怎么加样式都没效果。
tooltip: { crosshairs: true, shared: true, formatter: function () { var result = '<b>'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)+'</b><br/>' ; for(var i=0;i<this.points.length;i++){result += "<span style='color:"+ this.points[i].series.color+"'>" + this.points[i].series.name +": </span><b>" + this.points[i].y + this.points[i].point.unit+"</b><br/>"; } return result; }},
后来发现tooltip的useHTML属性
useHTML使用HTML :Boolean2.2
使用HTML替代SVG来渲染提示框内容。使用HTML可以在提示框中进行进一步的格式化,允许有表格和图像。这也被推荐用于rtl languages(从右到左读的语言)因为它在早期的Firefox中忙于处理rtl bugs。 Defaults to
false
.使用html替换SVG效果,加上useHTML:true就可以实现对提示框的样式修改。改后效果:
- highcharts 提示框样式
- highcharts 提示框样式
- highCharts提示框学习
- Highcharts(六)之提示框
- highCharts提示框不显示的问题
- Highcharts 数据点样式
- 气泡样式提示框
- Highcharts tooltip工具提示
- highcharts报表 四:tooltip数据提示框指配置
- Highcharts 设置坐标轴文字样式
- highcharts 坐标轴标签样式调整
- HighCharts自定义"无数据样式"
- SINA 样式的提示框
- QQ提示框样式2
- highcharts 仪表盘样式总结(gauge)
- 重写alert,confirm 提示框样式
- 提示框样式说明android:windowFrame
- Android之自定义Toast提示框样式
- 如何在IIS5.X/II6/IIS7.X下配置默认文档
- 【二分】Monster
- 李开复呼吁台湾要建立创新土壤引入有国际视野和经验的创业高级人才
- 操作系统的安装与启动基本原理
- 关于“Error: Net "gdfx_temp0", which fans out to "***:inst4|BIN", cannot be assigned more than”错误
- highcharts 提示框样式
- <<The Practice of Programming>>序言
- mac svn server
- 转:Find–atime –ctime –mtime的用法与区别总结
- NTGraph控件的小改进
- Zabbix Agent的配置
- android 如何修改桌面默认图标的大小
- shell脚本的一些注意事项---这是一个大神啊
- “HtmlSelect”不能有类型为“LiteralControl”的子级