highcharts 提示框样式
来源:互联网 发布:华为端口加入vlan命令 编辑:程序博客网 时间:2024/05/19 18:16
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+"'>" <span style="white-space:pre"></span>+ this.points[i].series.name +": </span><b>" + this.points[i].y <span style="white-space:pre"></span>+ 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就可以实现对提示框的样式修改。改后效果:
0 0
- highcharts 提示框样式
- highcharts 提示框样式
- highCharts提示框学习
- Highcharts(六)之提示框
- highCharts提示框不显示的问题
- Highcharts 数据点样式
- 气泡样式提示框
- Highcharts tooltip工具提示
- highcharts报表 四:tooltip数据提示框指配置
- Highcharts 设置坐标轴文字样式
- highcharts 坐标轴标签样式调整
- HighCharts自定义"无数据样式"
- SINA 样式的提示框
- QQ提示框样式2
- highcharts 仪表盘样式总结(gauge)
- 重写alert,confirm 提示框样式
- 提示框样式说明android:windowFrame
- Android之自定义Toast提示框样式
- 设置每个成员不同的编号(空)
- 数组做数据成员
- 第三周作业-实现随机点名的签到程序 第四需求,非头像版
- 关于“尝试读取或写入受保护的内存。这通常指示其他内存已损坏。”的解决
- 对象的克隆clone
- highcharts 提示框样式
- mybatis简介
- Java语言的26个细节
- ruby gem install rails 错误解决方法
- 第三方支付受限,那些躺着也中枪的行业
- Hibernate和MyBatis的区别
- c++头文件大全(转载)
- 回车 换行 0x0D 0x0A CR LF \r \n的来龙去脉
- Linux MTD系统剖析