14

我已经能够更改样条图上的笔触颜色，但是点和图例直到我通过单击它然后将鼠标悬停在每个点上来隐藏和显示系列之后才会改变颜色。

我在这里有一个小提琴：http: //jsfiddle.net/J56hm/2/

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });

    // the button handler
    $('#button').click(function() {
        chart.series[0].color = "#FF0000";
        chart.series[0].graph.attr({ stroke: '#FF0000' });

        $.each(chart.series[0].data, function(i, point) {
           point.graphic.attr({ fill: '#FF0000' });
         });
        chart.series[0].redraw();
        chart.redraw();
    });
});​

知道为什么会发生这种情况或解决此问题的方法吗？

4

3 回答 3

40

很简单，你可以使用这个代码

chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);
于 2013-06-12T04:05:46.187 回答
8

highcharts论坛上的以下线程有一个解决方案：

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437用一个小提琴http://jsfiddle.net/G5Pk7/来说明它。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

$('#button').click(function() {
    var series = chart.series[0];
    series.color = "#FF00FF";
    series.graph.attr({ 
        stroke: '#FF00FF'
    });
    chart.legend.colorizeItem(series, series.visible);
    $.each(series.data, function(i, point) {
        point.graphic.attr({
            fill: '#FF00FF'
        });
    });
    series.redraw();
});

这显然是一个肮脏的解决方案，但似乎有效。

于 2012-09-17T04:28:31.757 回答
5

你甚至看过控制台吗？

ReferenceError：系列未定义
http://fiddle.jshell.net/J56hm/1/show/
第 39 行

更改为以下解决了问题

$.each(chart.series[0].data, function(i, point) {
...
}

但是现在发生了相反的情况，当您将鼠标悬停在点上时，它再次变为蓝色您正试图通过设置颜色属性直接操纵由 highcharts 呈现的 svg。这不是正确的方法，因为 highchart 可能会根据其渲染算法重新绘制图表，并且您的所有更改都可能会丢失。
说了这么多之后，我仍然不知道 highcharts 中有任何支持的方法来做到这一点，如果我想出一些东西会更新答案

@jsFiddle

于 2012-09-14T08:50:06.777 回答