javascript - 在所有行上强制使用相同的颜色

Question

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

---

我绘制了 15 条不同的等值线，它们都必须是 #FF0000/Red。它们都有红色，但它们有稍微深一点和浅一点的变体。

选项对象:

        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 文档说明如下:

If there are more data series than colors, Flot will try to generate extra colors by lightening and darkening colors in the theme.

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

Answer 1

正如我发布问题一样，我想为什么不尝试添加相同的颜色 15 次。那行得通。

我变了

colors: ['#FF0000']

到

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

一个约束是它们基于从零开始的索引器，因此如果我在它们之间添加任何其他 Flot 数据系列，我必须重新排列颜色。

---

不管我的问题是什么，我再次阅读了 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' },
            ];