我已经解决了。我应该更彻底地阅读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或强制设置颜色?
答案 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' },
];