highcharts 自定义颜色和 tootip 点颜色

Question

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

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

海关颜色表

默认颜色图表

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

如何解决这个问题？

Answer 1

发生这种情况有两个原因：

新的自定义颜色不是纯色，而是渐变色，因此当您尝试提取 "series.color" 获得渐变色时， style="color" 值需要纯色待展示。
根据关于点格式 (http://api.highcharts.com/highcharts#tooltip.pointFormat) 的文档，着色似乎是在 "pointFormat" 字段上完成的，但我不确定为什么它在那里不起作用...希望它能起作用在 "formatter" 字段上。也许是 HighCharts 上的错误？

这是新的 "formatter" 字段：

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/

请注意，该点无法使用渐变格式，因此我选择了与 "point.series.color.stops[1][1]"

对应的颜色的突出显示部分

Answer 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/

highcharts 自定义颜色和 tootip 点颜色

highcharts custom colors and tootip point color

javascript

jquery

charts

colors

highcharts