highcharts自定义颜色和工具提示点颜色

时间:2015-04-21 20:25:02

标签: javascript jquery charts colors highcharts

我使用渐变添加自定义颜色停止但工具提示点颜色是objetcs,没有rgb,并且在pointFormat中没有显示基色。图例显示基色,标签没有问题。

pointFormat : '<span style="color:{point.color}">\u25CF</span>'+
' {series.name} {series.color} - {point.color}: <b>{point.y}</b><br/>' }

海关颜色表 Custom Colors

默认颜色图表 Default Colors

我的样本http://jsfiddle.net/castocolina/2mdt9rhb/ 尝试评论和取消注释自定义颜色块

如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

这种情况有两个原因:

  1. 新的自定义颜色不是纯色,而是渐变色,因此当您尝试提取&#34; series.color&#34;获得渐变,样式=&#34;颜色&#34;值需要显示纯色。
  2. 根据点格式(http://api.highcharts.com/highcharts#tooltip.pointFormat)的文档,着色似乎是在&#34; pointFormat&#34;但是我不确定为什么它在那里不起作用...希望它适用于&#34;格式化程序&#34;领域。可能是HighCharts上的一个错误?
  3. 这是新的&#34;格式化程序&#34;领域:

    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
    
        $.each(this.points, function(i, point) {
        s += '<br/><span style="color:'+ point.series.color.stops[1][1] +'">\u25CF</span>: ' + point.series.name + ': ' + point.y;
        });
    
        return s;
    }
    

    以下是使用颜色的工作演示:https://jsfiddle.net/adelriosantiago/pL0yzfsx/3/

    请注意,该点不能用渐变格式化,因此我选择了对应于&#34; point.series.color.stops [1] [1]&#34的颜色的突出显示部分;

答案 1 :(得分:2)

非常感谢@adelriosantiago,我添加了检查点或点属性取决于系列或饼的条件。最新版本的highcharts(4.1.5)有问题显示嵌入式派的工具提示,我不得不使用以前的版本(4.0.4)

formatter : function() {
    var s = '<b>' + this.x + '</b>';
    var color = null;

    if (typeof this.points != 'undefined') {
        $.each(this.points, function(i, point) {
            color = point.series.color.stops[1][1];
            if (i == 3) {
                s += '<br/><span style="color:' + color + '">\u00A2</span> ';
                s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 2);
            } else {
                s += '<br/><span style="color:' + color + '">\u25CF</span> ';
                s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 0);
            }
        });
    } else {
        color = this.point.color.stops[1][1];
        s = '<h3 style="color:' + color + '; font-weight: bold;">' + this.point.name + '</h3>';
        s += '<br/><span style="color:' + color + '">\u25CF</span> ';
        s += Highcharts.numberFormat(this.point.y, 2) + ' (' + Highcharts.numberFormat(this.point.percentage, 2) + '%)';
    }

    return s;
}

此处为完整修正http://jsfiddle.net/castocolina/2mdt9rhb/4/