在所有线上强制使用相同的颜色

时间:2015-02-10 13:52:38

标签: javascript jquery flot

我已经解决了。我应该更彻底地阅读API文档。


我绘制了15条不同的等值线,它们都必须是#FF0000 /红色。它们都有红色,但它们的颜色稍暗,颜色较浅。

选项对象:

        var options = {
            series: {                       
                points: { 
                    show: true,
                    radius: 5,
                    symbol: "circle",
                    fill: true,
                    color: ('#00FF00')
                },
                lines: {
                    editable: false,
                    hoverable: false,
                    clickable: false,
                    color: ("#FF0000")
                }
            },
            yaxes: [ { 
                position: "left", 
                min: 0, max: 60, 
                tickSize: 4, 
                //color: 'transparent'
            } ],
            xaxes: [ { 
                position: "bottom", 
                min: 7.00, max: 7.80, 
                //color: 'transparent' 
            } ],
            grid: {
                backgroundColor: "white",
                editable: true,
                hoverable: false, 
                clickable: false
            },
            legend: {
                position: "nw"
            },
            colors: ['#FF0000'],                
        };  

数据对象:

        var data = [                
            { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },   


            { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' },
        ];

Flot.js API文档说明了以下内容:

  

如果数据系列多于颜色,Flot将尝试通过主题中的颜色变亮和变暗来生成额外的颜色。

是否可以将此选项设置为false或强制设置颜色?

1 个答案:

答案 0 :(得分:2)

正如我发布了我的问题,我想为什么不尝试添加相同的颜色15次。这很有用。

我改变了

colors: ['#FF0000']

colors: ['#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000']

一个限制是它们基于从零开始的索引器,所以如果我在它们之间添加任何其他Flot data series,我必须重新排列颜色。


不管我的问题,我再次阅读API文档,发现color不是lines对象的一部分。这就是我做错了。

我将Data对象更改为此颜色,颜色设置在每行的末尾:

            var data = [                
                { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 


                { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' },
            ];