私はwebappに取り組んでいますが、視覚的に魅力的であるため、最近、googleチャートをchart.jsに交換しました。ただし、私が取った1つの損失は、データポイントを超えるツールチップを取得できなくなったことです。私はJavaScriptの初心者なので、これがどのように実行できるか誰もが知っているのではないかと思っていました。グラフと設定のコードは次のとおりです。
var data = {
labels : graphData[0],
datasets : [
{
fillColor : "rgba(200,160,100,0.5)",
strokeColor : "rgba(80,240,70,1)",
pointColor : "rgba(80,240,70,1)",
pointStrokeColor : "#fff",
data : graphData[3]
},
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : graphData[1]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : graphData[2]
}
]
};
var options = {
scaleShowGridLines : true,
scaleShowLabels : true,
animationSteps : 150,
scaleOverride: true,
scaleSteps : Math.max.apply(Math, graphData[3]),
scaleStepWidth : 1,
scaleStartValue : 1
};
var ctx = document.getElementById("chart_div").getContext("2d");
ctx.canvas.width = Math.max(graphData[0].length * 60, 600);
var myNewChart = new Chart(ctx).Line(data,options);
$('#chart_area').fadeIn();
$('html, body').animate({
scrollTop: $("#picture_area").offset().top
}, 1000);
このgithubページで入手できるツールチップと一緒に使用できるchartjsバージョンがあります https://github.com/Regaddi/Chart.js/tree/tooltips
上記のリンクは利用できなくなっているようです
ただし、利用可能 here Github
あなたはドキュメントを見ることができます ここ
https://github.com/nnnick/Chart.js/blob/master/Chart.min.js からChart.min.jsをコピーするだけです。
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
showTooltips: true,
multiTooltipTemplate: "<%= value %>",
});
これを使用して、chartjsにグローバル設定を設定します。