Flotで「カテゴリ」モードを使用する場合、各バーに異なる色をどのように設定できますか?
このコードは、すべてのバーを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"]]
}
});
(fiddle here )を生成します:
データを入れるときは、色を中に入れる必要があります:
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>