是否可以仅在特定y范围的高图xy图中更改线条颜色?

时间:2014-05-14 15:03:44

标签: javascript jquery highcharts

我想知道是否有可能使用某种功能改变特定y范围的高图中的线条颜色,我真的不知道如何实现这一点,这是我的想法,作为初学者我不知道如何写函数来做这个,我想开发的函数就是这个

添加小提琴看看FIDDLE

function range(ystart,yend,ycolor,xpoint){

// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color

// So I would like to call like this 
range(1,6,"#F90B0B",34)
}

这是实际代码

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
        type : 'scatter',
        marginLeft: 50,
        marginBottom: 90
    },

    yAxis: {
        reversed: true,

    },
    plotOptions: {
        series: {
                  animation: {
                               duration: 2000
                             },
                  lineWidth: 2
                },
    },
    xAxis: {
        opposite: true  
    },
    series: [{
        name: 'Test Plot',
        data: [
            [28, 0],
            [29,1],
            [30, 3],
            [34, 4],
            [32,5],
            [28, 6],
            [24, 7],
            [19,8],
            [15, 9]
        ]
    }]
});

});

提前感谢所有志愿者

2 个答案:

答案 0 :(得分:2)

最简单的方法是分离数据并为不同的范围创建单独的系列(具有不同的颜色)。当然,这意味着你必须创建一个自定义图例。

编辑您的功能:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy',
            type : 'scatter',
            marginLeft: 50,
            marginBottom: 90
        },

        yAxis: {
            reversed: true,

        },
        plotOptions: {
            series: {
                      animation: {
                                   duration: 2000
                                 },
                      lineWidth: 2
                    },
        },
        xAxis: {
            opposite: true  
        },
        series: [{
            name: 'Test Plot',
            data: [
                [28, 0],
                [29,1],
                [30, 3],
                [34, 4],
                [32,5],
                [28, 6]
            ],
            color: "#F90B0B"
        },
               {
            name: 'Test Plot2',
            data: [
                [28, 6],
                [24, 7],
                [19,8],
                [15, 9]
            ],
                   color: "#F909F9"
        }]
    });
});

答案 1 :(得分:1)

此刻不支持,只有两个系列,但在最近的功能中它应该可用。

相关问题