Wijmo UI for the Web
値による棒の色の変更
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > BarChart > 操作手順 > 値による棒の色の変更 |
クイックスタートの例を基に、データをより理解しやすくするために、データ値に応じて棒の色を変更することができます。
 |
注意：初期状態では、グラフは bar.hoverStyle 塗りつぶし色で表示され、マウスポインタを棒から外したときに seriesStyle 塗りつぶし色で表示されます。このため、マウスポインタを外したときに色が変化しないように、２つの場所で色値を設定する必要があります。 |
ドロップダウンからコードを貼り付けます
| 棒の色を変更するスクリプト |
コードのコピー |
|---|---|
<script type="text/javascript">
var fill = "";
$(document).ready(function () {
$("#chart").wijbarchart({
header: {text: "Big Ten Championships"},
horizontal: false,
seriesList: [{
label: "Big Ten Championships",
legendEntry: false,
data: {
x: ['Illinois', 'Indiana', 'Iowa', 'Michigan', 'Michigan State',
'Minnesota', 'Nebraska', 'Northwestern', 'Ohio State',
'Penn State', 'Purdue', 'Wisconsin'],
y: [230, 167, 105, 351, 84, 178, 3, 69, 185, 57, 69, 183]
}
}],
mouseOut: function (e, data) {
var y = data.y,
bar = data.bar;
if (y < 100) {
bar.attr({ fill: "red", stroke: "none" });
}
if (y > 100 && y < 200) {
bar.attr({ fill: "yellow", stroke: "none" });
}
if (y > 200) {
bar.attr({ fill: "green", stroke: "none" });
}
}
});
var bars = $("#chart").data("fields").chartElements.bars;
$.each(bars, function (i, bar) {
var node = bar.node,
data = $(node).data("wijchartDataObj"),
y = data.y;
if (y < 100) {
bar.attr({ fill: "red", stroke: "none" });
}
if (y > 100 && y < 200) {
bar.attr({ fill: "yellow", stroke: "none" });
}
if (y > 200) {
bar.attr({ fill: "green", stroke: "none" });
}
})
});
</script>
| |
画像タイトル |