Chart.js中的图例仅显示一个标签 [英] Legends in Chart.js, shows only one label

问题描述

只是警告:我是chart.js的新手！

Just a warning: I am new to chart.js!

我有几个水平条形图，除了一个我无法摆脱的问题外，它工作正常.我在y轴上有5个标签，但图形顶部的图例仅在第一个(最顶部)条的颜色中显示了一个小矩形，甚至不显示标签本身，其后是标签列表.我以为它会在与颜色相同的小条旁边显示每个标签.

I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.

不幸的是，这是一个Intranet应用程序，我无法提供链接，但这就是我所拥有的(数据通过ajax调用传递给此函数):

Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):

function drawRespChart(chartLabels, chartData) {
    var ctx = $("#rtChart");
    console.log("Labels Array: " + chartLabels);
    console.log("Data Array: " + chartData);

    if (chartRespTime)
        chartRespTime.destroy();

    var chart = {
        labels: chartLabels,
        datasets: [
            {
                label: chartLabels,
                backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
                data: chartData
            }
        ]
    };

    chartRespTime = new Chart(ctx, {
        type: 'horizontalBar',
        data: chart,
        datalabels: {
            anchor: 'end',
            align: 'start',
        },
        options: {
            title: {
                display: true,
                text: 'IDC Database Response Time (mili-seconds)'
            },
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count'
                    },
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Response Time (ms)'
                    }
                }]
            },
            plugins: {
                datalabels: {
                    color: 'white',
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 15;
                    },
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
            },
            maintainAspectRatio: true,
            responsive: true,
            showInlineValues: true,
            centeredInllineValues: true,
            tooltipCaretSize: 0
        }
    });
}

这是我在控制台窗口中看到的:

This is what I see in console window:

Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3

我看到的图例是一个矩形，颜色与第一个条形相同，然后是标签列表.

What I see as legend is one rectangle, same color as first bar, followed by list of labels.

推荐答案

似乎Chart.js标签仅在拆分数据集时有效.

It seems that charts.js labels only works when you split the datasets.

留下一个例子. https://jsfiddle.net/code4mk/1j62ey38/

datasets: [ {
          label: 'Result',
          fill:false,
          data: aDatasets1,
          backgroundColor: '#E91E63',
          },
         {
          label: 'Result2',
          fill:false,
          data: aDatasets2,
          backgroundColor: '#E91E93',
    }]; 

这篇关于Chart.js中的图例仅显示一个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！