19

私は 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);
4

3 に答える 3

8

この github ページhttps://github.com/Regaddi/Chart.js/tree/tooltipsで入手できるツールチップと共に利用可能な chartjs バージョンがあります 。

上記のリンクはもう利用できないようです

ただし、ここGithubで入手できます

ここでドキュメントを見ることができます

于 2013-08-24T09:01:26.960 に答える
5

You just have to copy Chart.min.js from https://github.com/nnnick/Chart.js/blob/master/Chart.min.js.

于 2014-07-13T12:46:55.897 に答える
1 
var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true,
        showTooltips: true,
        multiTooltipTemplate: "<%= value %>",
    });

これを使用して、chartjs でグローバル設定を設定します。

于 2014-12-24T06:35:21.610 に答える