[英]Different Color Bars for Flot Categories Bar Chart
在 Flot 中使用“類別”模式時,如何為每個條形設置不同的顏色?
此代碼使每個條形成為colors
數組中的第一種colors
。 我希望每個條形都是colors
數組中的相應顏色。
當前代碼:
var data = [["Red",1],["Yellow",2],["Green",3]];
$.plot("#placeholder1div",[data], {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
mode: "categories",
},
colors: ["#FF0000","#FFFF00","#00FF00"]
});
正如我對Flot 的建議,刪除插件並自行配置。
// separate your 3 bars into 3 series, color is a series level option
var data = [{data: [[0,1]], color: "red"},
{data: [[1,2]], color: "yellow"},
{data: [[2,3]], color: "green"}];
$.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
// drop the categories plugin and label the ticks yourself
// you'll thank me in the long run
ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
}
});
運行代碼:
var data = [{data: [[0,1]], color: "red"}, {data: [[1,2]], color: "yellow"}, {data: [[2,3]], color: "green"}]; $.plot("#placeholder",data, { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 } }, xaxis: { ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]] } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> <div id="placeholder" style="width:400px; height: 300px"></div>
當您放入數據時,您必須將顏色放入其中:
var data = [
{color: '#ff00aa', data: [[0, 1]]},
{color: 'red', data: [[1, 1]]},
{color: 'yellow', data: [[2, 2],[3, 2]]},
{color: 'orange', data: [[4, 2]]},
{color: 'blue', data: [[5, 4],[6, 7]]},
{color: '#000000', data: [[7, 1]]}
];
使用以下配置
// Colors var color01 = '#00cde2'; var color02 = '#ffb700'; var color03 = '#7ac70c'; var color04 = '#313541'; var color05 = '#fc3232'; var color06 = '#1cb0f6'; var color07 = '#00c07f'; var data = [ {data: [[0, 4.1]], color: color01}, {data: [[1, 1.8]], color: color02}, {data: [[2, 2]], color: color03}, {data: [[3, 4.5]], color: color04}, {data: [[4, 3.7]], color: color05}, {data: [[5, 5.6]], color: color06}, {data: [[6, 2.6]], color: color07} ]; $.plot($("#placeholder"), data, { series: { lines: { fill: false }, points: {show: false}, bars: { show: true, align: 'center', barWidth: 0.5, fill: 1, lineWidth: 1 } }, xaxis: { tickLength: 0, ticks: [ [0, "Data One"], [1, "Data Two"], [2, "Data Three"], [3, "Data Four"], [4, "Data Five"], [5, "Data Six"], [6, "Data Seven"]] }, yaxis: { min: 0 }, grid: { hoverable: true, backgroundColor: { colors: ["#fff", "#fff"] }, borderWidth: { top: 1, right: 1, bottom: 2, left: 2 }, borderColor: { top: "#e5e5e5", right: "#e5e5e5", bottom: "#a5b2c0", left: "#a5b2c0" } } });
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; #placeholder{ font-family: 'Open Sans', sans-serif; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <div id="placeholder" style="width:100%; height: 300px"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.