Wijmo UI for the Web
クリック可能な凡例
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > CompositeChart > 概念 > クリック可能な凡例 |
デフォルトでは、複合グラフでユーザーは 凡例 エントリをクリックして、グラフに表示するデータ系列を切り替えることができます。最初のクリックで、データ系列のグラフの要素が非表示になります。２番目のクリックで、データ系列の棒、折れ線、または円のウェッジが元の状態に戻って表示されます。
オフ |
オン |
この機能は常に使用するわけではありません。この機能を無効にする場合は、ドキュメントの ready 関数内のスクリプトに次のようなコードを追加します：
| 凡例のクリック機能をオフにする |
コードのコピー |
|---|---|
$(".wijchart-legend").click(function () { return false;});
| |
スクリプト全体は次のようになります。
| チャートスクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijcompositechart").wijcompositechart({
axis: {y: {text: "Total Hardware"}},
hint: {
content: function () {return this.label + '\n ' + this.y + '';}
},
header: {text: "Hardware Distribution"},
seriesList: [
{
type: "column",
label: "West",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [5, 3, 4, 7, 2] }
},
{
type: "column",
label: "Central",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [2, 2, 3, 2, 1] }
},
{
type: "column",
label: "East",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 4, 4, 2, 5] }
},
{
type: "pie",
label: "asdfdsfdsf",
center: { x: 150, y: 150 },
radius: 60,
data: [
{label: "MacBook Pro", data: 46.78},
{label: "iMac", data: 23.18},
{label: "MacBook", data: 20.25}]
},
{
type: "line",
label: "Steam1",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 6, 2, 9, 5]
},
markers: {visible: true, type: "circle"}
},
{
type: "line",
label: "Steam2",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [1, 3, 4, 7, 2]
},
markers: {visible: true, type: "tri"}
}
]
});
$(".wijchart-legend").click(function () { return false;});
});
</script>
| |