[英]Flot Charts. Custom color below x-axis value
我有一個Flot條形圖代碼。
$(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的條都是特定的顏色(例如紅色)。 我嘗試使用閾值插件來做到這一點,但是它增加了附加值。 有解決方案嗎?
閾值插件不應添加其他值,請參見下面的小提琴或代碼段:
$(function() { var barOptions = { series: { bars: { show: true, barWidth: 0.4, fill: true, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 0.8 }] }, align: 'center' } }, xaxis: { mode: "categories", tickLength: 0, ticks: [ [1, 'First'], [2, 'Second'], [3, 'Third'] ] }, 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: [ [1, -100], [2, 66.67], [3, -177.77], ], threshold: { below: 0, color: "rgb(200, 20, 30)" }, }; $.plot($("#flot-bar-chart"), [barData], barOptions); });
#flot-bar-chart { height: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script> <div id="flot-bar-chart"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.