Javascript 弗洛特图表。x轴值以下的自定义颜色
我有一个Flot条形码Javascript 弗洛特图表。x轴值以下的自定义颜色,javascript,flot,Javascript,Flot,我有一个Flot条形码 $(function() { var barOptions = { series: { bars: { show: true, barWidth: 0.4, fill: true, fillColor: {
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.4,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min:-200, max: 200, tickSize: 50,
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth:0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "Cost: %y %"
}
};
var barData = {
label: "bar",
data: [
["First", -100],["Second", 66.67],["Third", -177.77],]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
我希望0以下的每个条都是特定的颜色(例如红色)。我曾尝试使用threshold插件来实现这一点,但它增加了额外的值。有什么解决方案吗?阈值插件不应添加额外的值,请参阅以下内容或代码片段:
$(函数(){
var气压选项={
系列:{
酒吧:{
秀:没错,
杆宽:0.4,
填充:是的,
填充颜色:{
颜色:[{
不透明度:0.8
}, {
不透明度:0.8
}]
},
对齐:“居中”
}
},
xaxis:{
模式:“类别”,
长度:0,
滴答声:[
[1,‘第一’],
[2,‘第二’],
[3,‘第三’]
]
},
亚克斯:{
最低:-200,
最高:200,
尺寸:50,
},
颜色:[“#1ab394”],
网格:{
颜色:#999999“,
悬停:是的,
可点击:正确,
勾选颜色:“D4”,
边框宽度:0
},
图例:{
节目:假
},
提示:正确,
工具提示:{
内容:“成本:%y%”
}
};
var barData={
标签:“酒吧”,
数据:[
[1, -100],
[2, 66.67],
[3, -177.77],
],
阈值:{
低于:0,,
颜色:“rgb(200、20、30)”
},
};
$.plot($(“#弗洛特条形图”),[barData],barOptions);
});代码>
#flot条形图{
高度:300px;
}
谢谢。这是因为我的x轴没有刻度。也许你知道有没有可能在x轴的顶部显示数字?因为现在我看不到一些数字,也看不到更小的步长。你的y轴最小值只有-100而不是-200。对于非常小的条形图,您需要一种背景可读的条形图标签颜色,例如黑色。