更改flot.js中一行的颜色

时间:2016-09-17 23:20:31

标签: javascript jquery flot

我有一个包含每个月数据的折线图。无论我在哪里添加选项列表中的颜色选项,或者甚至作为数据的一部分,该线仍然是默认的黄色。

以下是使用默认值的代码。

我需要在哪里添加颜色变量才能显示它。

  var plotData = [[1, data.data['Jan']], [2, data.data['Feb']], [3, data.data['Mar']], [4, data.data['Apr']], [5, data.data['May']], [6, data.data['June']], [7, data.data['July']], [8, data.data['Aug']], [9, data.data['Sep']], [10, data.data['Oct']], [11, data.data['Nov']], [12, data.data['Dec']]];

                                $.plot('#placeholder', [plotData]), {

                                    series: {
                                        lines: {
                                            show: true,
                                            lineWidth: 4,

                                        },
                                        points: {
                                            show: true
                                        },
                                        shadowSize: 0

                                    },
                                    grid: {
                                        hoverable: true,
                                        clickable: false,
                                        borderColor: '#EDEDED',
                                        borderWidth: 1,
                                        labelMargin: 15,
                                        backgroundColor: '#FFF'
                                    },
                                    yaxis: {
                                        min: 0,
                                        color: '#EDEDED'
                                    },
                                    xaxis: {
                                        color: '#FFF',

                                    },
                                    legend: {
                                        show: false
                                    },
                                    tooltip: true,
                                    tooltipOpts: {
                                        content: '%x: %y',
                                        shifts: {
                                            x: -30,
                                            y: 25
                                        },
                                        defaultTheme: false
                                    }

                                }

1 个答案:

答案 0 :(得分:2)

)[plotdata]后面移到选项对象的末尾:

$.plot('#placeholder', [plotData]), {
                                 ^

就像现在一样,您在没有选项的情况下调用plot,因此使用默认选项。 这是一个显示工作代码的fiddle

有关定义自定义颜色的正确方法,请参阅here或上述小提琴。