chart.jsを使用した折れ線グラフの次の例があります。見せたい:
var line_chart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data: [15, 25, 15],
label: "My Dataset1",
borderColor: "#00F",
fill: false
}, {
data: [35, 15, 25],
label: "My Dataset2",
borderColor: "#F00",
fill: false
}
]
},
options: {
tooltips: {
mode: 'label',
},
hover: {
mode: 'label'
},
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
キャンバス要素(line-chart
)を選択するためにjQueryは必要ありません。
1▸解決策:
チャートオプションに以下を追加します。
legend: {
onHover: function(e) {
e.target.style.cursor = 'pointer';
}
},
hover: {
onHover: function(e) {
var point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = 'pointer';
else e.target.style.cursor = 'default';
}
}
2▸解決策:
セットツールチップさん mode
へdataset
:
tooltips: {
mode: 'dataset'
}
ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ⧩
var line_chart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data: [15, 25, 15],
label: "My Dataset1",
borderColor: "#00F",
fill: false
}, {
data: [35, 15, 25],
label: "My Dataset2",
borderColor: "#F00",
fill: false
}]
},
options: {
tooltips: {
mode: 'dataset',
},
legend: {
onHover: function(e) {
e.target.style.cursor = 'pointer';
}
},
hover: {
onHover: function(e) {
var point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = 'pointer';
else e.target.style.cursor = 'default';
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加