使用flot api实现条形图的阈值

时间:2013-05-08 11:28:11

标签: jquery graph flot threshold

我正在使用flot绘制图表。我想实现这样的功能,以便我能够突出显示我的图表中10%的增长,显示的颜色不同于我现在使用的颜色。 我正在使用的代码是:

var options_blue = {
    series: {
        color: 'blue',
        threshold: { above: 5, color: 'green' },
        bars: { show: true, barWidth: 20 * 20 }
    },
    xaxis: { show: false, min: 1 },
    yaxis: { show: false, min: 1, max: max_value }
};

var options_red = {
    series: {
        color: '#ff0000',
        threshold: { above: 10, color:'green' },    
        bars: { show: true, barWidth: 20 * 20 }
    },
    threshold: { above: 5, color: "yellow" },
    xaxis: { show: false, min: 1 },
    yaxis: { show: false, min: 5, max: max_value }
};

我使用的是jquery.flot.threshold.js,但超出阈值的图表颜色没有变化。

1 个答案:

答案 0 :(得分:3)

您使用的是“以上”,但阈值插件仅支持“低于”。因此,您只需要交换系列和阈值颜色,然后使用“下方”。

另请注意,在options_red中,您在系列选项之外有第二个阈值选项。阈值插件仅查找系列选项中的选项,以便忽略第二个选项。