Question

只是一个警告：我是 chart.js 的新手！

我有几个水平条形图，除了一个我无法摆脱的问题外，它运行良好。我在 y 轴上有 5 个标签，但图表顶部的图例仅显示第一个（最顶部）条形颜色的一个小矩形，甚至不显示标签本身，后面是标签列表。我认为它会在与图表中颜色相同的小条旁边显示每个标签。

不幸的是，这是一个 Intranet 应用程序，我无法提供链接，但这是我所拥有的（数据从 ajax 调用传递到此函数）：

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

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

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

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

Answer 1

charts.js 标签似乎只有在拆分数据集时才有效。

举个例子。 https://jsfiddle.net/code4mk/1j62ey38/

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

Chart.js 中的图例，仅显示一个标签

1 个答案: