ChartJS js：标记每个数据集

vc6uscn9 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(174)

我一直在尝试让chart.js为每个数据集都有一个标签，但是第一个标签位于两个数据集的下面，第二个标签位于图表的空白区域。

var powerChart = new Chart(powerCanvas, {
  type: "bar",
  data: {
    labels: ["Volts", "Amperes"],
    datasets: [
      {
        label: "Volts", // This bar should have this label underneath itself
        data: [24.78], // Initial value, will be overwritten
      },
      {
        label: "Amperes", // This bar should have this label underneath itself
        data: [14.51],
      },
    ],
  },
  options: {},
});

请参阅https://jsfiddle.net/w20c3tru/2/，了解我所尝试的方法和一个工作示例。我尝试跟随Chart.js Line-Chart with different Labels for each Dataset，但看不到任何区别。

chart.js

来源：https://stackoverflow.com/questions/74275487/chart-js-label-each-dataset

2条答案

按热度按时间

lkaoscv71#

请注意以下注解：

var powerChart = new Chart(powerCanvas,
    {
        type: 'bar',
        data:
        {
            labels: ['Volts', 'Amperes'],
            datasets:
                [
                    {
                        label: 'Value',       // This is actually the label that shows up when you hover over a bar
                        data: [24.78, 14.51]  // NOTE: Number of labels defined above should equal number of values here
                    },
                ]
        },
        options:
        {
        }
    }
);

编辑：

data:
{
    labels: ['Volts', 'Amperes'],
    datasets:
        [
            {
                data: [24.78, 14.51],  // Volts and amperes, respectively
                borderWidth: 1,
                borderColor: ['#0000e0', '#e00000'],  // Border colors for volts and amperes, respectively

            },
        ]
},

赞(0）回复(0）举报 2022-11-06

uelo1irk2#

最后，由于一位用户将数据分隔为x和y部分，我让它按照我想要的方式工作