Question

基本上，我使用MySQL的AJAX来绘制数据线图。现在，我希望根据数据在折线图上获得不同颜色的点。如果数据落在范围内，它将是不同的颜色和外部范围，它将是不同的颜色。有人请建议或指导。使用的代码如下：

我尝试过使用下面提供的Flot阈值插件，但它无效。

var offset = 0;
//plot(html);
var options = {
    colors: ["#3fcf7f"],
    threshold: {
        below: 200,
        colors: ["#ff7070"]
    },
    series: {
        lines: {
            show: true,
            lineWidth: 1,
            fill: true,
            fillColor: {
                colors: [{
                    opacity: 0.0
                }, {
                    opacity: 0.2
                }]
            },
        },
        points: {
            radius: 5,
            show: true
        },
        shadowSize: 2
    },
    grid: {
        color: "#fff",
        hoverable: true,
        clickable: true,
        tickColor: "#f0f0f0",
        borderWidth: 0
    },
    //colors: ["#ff7070"],
    xaxis: {
        mode: 'time',
        timeformat: '%d/%m/%y',
        //rotateTicks: 90
    },
    yaxis: {
        ticks: 5,
        tickDecimals: 0,
    },
    tooltip: true,
    tooltipOpts: {
        content: "%y.1 on %x.4",
        defaultTheme: false,
        shifts: {
            x: 0,
            y: 20
        }
    }
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments

$.plot("#flot-color", data, options);

Answer 1

没有colors属性，color和threshold属性属于series属性。将您的选项更改为：

var options = {
    series: {
        color: "#3fcf7f",
        threshold: {
            below: 200,
            color: "#ff7070"
        },
        lines: {
        ...

Fiddle显示工作图表。

Flot Chart - 基于数据点的单线图上的不同颜色

1 个答案: