javascript - 如何更改 Highcharts 中绘图线上方和下方的图形颜色

标签 javascript charts highcharts

在 HighCharts 折线图中,如何根据与绘图线值相关的值设置系列线的颜色。

例如,如果我有一条情节线 y = 15 ,我怎么能在 y < 15 时使系列颜色为绿色,在 y > 15 时如何使系列颜色为红色

http://jsfiddle.net/adamtsiopani/YBMny/

$('#container').highcharts('StockChart', {


    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'KPN Year View'
    },

    yAxis: {
        plotLines: [{ 
            label: {
                text: 'Baseline',
                x: 25
            },
            color: 'orange',
            width: 2,
            value: 15,
            dashStyle: 'longdashdot'
        }],
    },

    series: [{
        name: 'KPN12345',
        data: [
            [1327881600000, 11],
            [1327968000000, 18],
            [1328054400000, 12],
            [1328140800000, 5],
            [1328227200000, 11],
            [1328486400000, 17],
            [1328572800000, 10],
            [1328659200000, 10],
            [1328745600000, 15],
            [1328832000000, 10],
            [1329091200000, 11]
        ]
    }]
});

最佳答案

您可以使用 threshold 的组合来做到这一点和 negativeColor系列选项。

      series: [{
        name: 'KPN12345',
        data: [
            [1327881600000, 11],
            etc...
        ],
        threshold: 15,
        negativeColor: 'green',
        color: 'red',
        tooltip: {
            valueDecimals: 2
        }
    }]

fiddle here .

enter image description here

关于javascript - 如何更改 Highcharts 中绘图线上方和下方的图形颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16255444/

相关文章:

javascript - 如何自定义 Angular 谷歌图表图例信息

javascript - Highcharts 三重钻取圆 Angular 插件错误

javascript - 如何根据 AngularJS 中的下拉菜单项更改页面标题

javascript - Protractor :在我的测试中正确使用 waitReady.js 文件

javascript - Google 图表在 Bootstrap 模态中显示时显示对齐错误

javascript - 在谷歌折线图中的同一行上组合实线和虚线格式

javascript - 排行榜。将工具提示置于所有元素之上

javascript - 在 AngularJS 中包装 HighChart

javascript - 如何从父文档捕获 iframe 内的刷新?

javascript - AntD 自动完成下拉菜单默认打开焦点,我该如何防止它?