Charts 要显示数据集标签吗

我正在尝试

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
    });

新图表（画布）.Line（数据、{
回答：是的，
动画：没错，
barValueSpacing:5，
barDatasetSpacing:1，
工具提示FillColor:“rgba（0,0,0,0.8）”，
多工具模板：“-”，
showTooltips：正确
});

目前我对折线图的看法是

我想要的是

---

您可以使用自定义工具提示选项。下面的代码改编自

预览

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,
        });
    }
});

函数自定义标签（短、长）{
这个。短=短；
this.long=long；
}
CustomLabel.prototype.toString=函数（）{
把这个还给我；
}
风险值数据={
标签：[
新客户标签（“一月”、“一月十一日”），
新客户标签（“2月”、“2月12日”），
新客户标签（“三月”、“三月十三日”），
新客户标签（“4月”、“4月14日”），
新客户标签（“5月”、“5月15日”），
新客户标签（“6月”、“6月16日”），
新客户标签（“7月”、“7月17日”）]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
var ctx=document.getElementById（“图表”）.getContext（“2d”）；
新图表（ctx）.线条（数据{
回答：是的，
自定义工具提示：函数（工具提示）{
var tooltipEl=$（“#chartjs工具提示”）；
如果（！工具提示）{
工具管道({
不透明度：0
});
返回；
}
工具管道removeClass（“上下”）；
tooltipEl.addClass（tooltip.yAlign）；
var innerHtml=[''，
''+工具提示.title.long+''，
''
].加入（“”）；
对于（var i=tooltip.labels.length-1；i>=0；i--）{
innerHtml+=[
'',
''+data.dataset[i].label+'：''+tooltip.labels[i]+'，
''
].加入（“”）；
}
html（innerHtml）；
工具管道({
不透明度：1，
左：tooltip.chart.canvas.offsetLeft+tooltip.x+'px'，
顶部：tooltip.chart.canvas.offsetTop+tooltip.y+'px'，
fontFamily:tooltip.fontFamily，
fontStyle:tooltip.fontStyle，
});
}
});

---

小提琴-