想要显示数据集标签

Question

我正在尝试使用一组数据的ChartJS折线图。我有多行。我想显示数据的工具提示。但我无法做到。 我的代码是

new Chart(canvas).Line(data,{
        responsive : true,
        animation: true,
        barValueSpacing : 5,
        barDatasetSpacing : 1,
        tooltipFillColor: "rgba(0,0,0,0.8)",
        multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
        showTooltips:true
    });

目前我对折线图的看法是

我想要的是enter image description here

Answer 1

您可以使用自定义工具提示选项。以下代码改编自https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html

的示例

预览

<强> CSS

#canvas-holder {
    width: 500px;
    height: 300px;
}
#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    font-size: 12px;
    color: white;
    padding: 5px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
}
.chartjs-tooltip-section{
    padding: 1px;
}

<强> HTML

<div id="canvas-holder">
    <canvas id="chart" />
</div>
<div id="chartjs-tooltip"></div>

<强>脚本

function CustomLabel(short, long) {
    this.short = short;
    this.long = long;
}
CustomLabel.prototype.toString = function () {
    return this.short;
}

var data = {
    labels: [
        new CustomLabel("January", "January 11"),
        new CustomLabel("February", "February 12"),
        new CustomLabel("March", "March 13"),
        new CustomLabel("April", "April 14"),
        new CustomLabel("May", "May 15"),
        new CustomLabel("June", "June 16"),
        new CustomLabel("July", "July 17")],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx = document.getElementById("chart").getContext("2d");
new Chart(ctx).Line(data, {
    responsive: true,
    customTooltips: function (tooltip) {
        var tooltipEl = $('#chartjs-tooltip');
        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        var innerHtml = ['<div class="chartjs-tooltip-section">',
            '   <span>' + tooltip.title.long + '</span>',
            '</div>'
        ].join('');
        for (var i = tooltip.labels.length - 1; i >= 0; i--) {
            innerHtml += [
                '<div class="chartjs-tooltip-section">',
                '   <span style="color:' + tooltip.legendColors[i].fill + '">' + data.datasets[i].label + ': ' + tooltip.labels[i] + '</span>',
                '</div>'
            ].join('');
        }
        tooltipEl.html(innerHtml);

        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontStyle: tooltip.fontStyle,
        });
    }
});

小提琴 - http://jsfiddle.net/fLm8c5ee/