0
ChartJSを使用して複数の折れ線グラフを作成したいと思います。複数の折れ線グラフが正常に動作しています。ツールチップは私が問題を抱えているだけです。コードと画像を確認してください。ChartJSでラインチャートのツールチップを取得できません
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
},
{
label: "My Second dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(255, 99, 132, 1)",
borderColor: "rgba(255, 99, 132, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 99, 132, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 99, 132, 1)",
pointHoverBorderColor: "rgba(255, 99, 132, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [40, 59, 80, 100, 56, 80, 70],
spanGaps: false,
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
1月の月私は、2個のデータ[ "私の最初のデータセット":65、 "私の第二のデータセット":40]を持っているので、ツールチップは正しくなく、行進に示します私は2つのデータ(「最初のデータセット」:80、「私の2番目のデータセット」:80)を持っていますが、「My First dataset」値のみを表示するツールチップしかないので、「My Second Dataset」値を見つけることができません。
その作業罰金私が使用chatJsの2.1.xのだとデータが同じ場合にツールチップが両方表示することができ、私は2.2.xののCDNは、私のcharJsファイルをカバー使用しようとしている、私はちょうど見つけ、彼らが変化しそうですあなたのバージョンを下げることができない場合、ツールチップのスタイル、おそらくあなたのカスタムツールチップを持っている必要があります。 – Anami