更改Highcharts中特定数据点的工具提示的背景色 [英] Changing backgroundcolor of tooltip for a specific data point in Highcharts

查看:107
本文介绍了更改Highcharts中特定数据点的工具提示的背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个Highcharts折线图并启用了工具提示,但是,我只想更改图表上单​​个数据点的工具提示的背景颜色.
有可能这样做吗?
到目前为止我有什么
tooltip: { formatter: function () { return this.y; }, backgroundColor: '#68BD49', borderColor: '#000000', borderWidth: '1' },

I have a Highcharts line chart and have tooltips enabled, however, I would like to change the background color of tooltip for just a single data point on the chart.
Is it possible to do so?
What I have so far
tooltip: { formatter: function () { return this.y; }, backgroundColor: '#68BD49', borderColor: '#000000', borderWidth: '1' },

推荐答案

是的,可以使用HTML选项并定义自定义参数.显然,您可以使用CSS样式/类禁用填充/边距,但是以最简单的方式,您可以通过以下方式实现此目的:

Yes it is possible, by using HTML option and define custom parameters. Obviously you can use CSS styles / classes disable padding/margins, but in the simplest way you can achive this in this way:

 tooltip: {
        useHTML:true,
        formatter: function() {
            console.log(this);
            if(this.point.customBck)
                return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
            else
                return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
        }
    },

http://jsfiddle.net/XnLpH/1/

这篇关于更改Highcharts中特定数据点的工具提示的背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆