chart.js 中多个数据集的问题答案

【问题标题】：problem with multiple datasets in chart.jschart.js 中多个数据集的问题
【发布时间】：2019-02-28 17:12:46
【问题描述】：

我正在尝试使用 chart.js 创建一个条形图，以按出版物显示广告购买中的广告展示次数。所需的图表将为每个出版物显示一个条形图，表示该网站上的广告的展示次数。

我认为这需要作为多个数据集进行，每个出版物一个，其中每个数据集包含一个数据点。这是我用于这种方法的代码：

var chartData_webbanner_300x600 = {
    labels: ["Publication 1", "Publication 2"],
    datasets: [
        {
            label: "Publication 1",
            backgroundColor: "#971317",
            data: [30000]
        },
        {
            label: "Publication 2",
            backgroundColor: "#0b72ba",
            data: [40000]
        },
    ]
};

window.onload = function() {

        var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');
    window.myBar = new Chart(ctx_webbanner_300x600, {
        type: 'bar',
        data: chartData_webbanner_300x600,
        options: {
            title: {
                display: true,
                text: 'Web Banner Impressions'
            },
            responsive: true,
        }
    });


}; //window.onload = function()

生成的图表仅显示一个条形图。截图如下：

我也尝试将其作为单个数据集，但没有运气。这是我尝试过的方法：

var chartData_webbanner_300x600 = {
    labels: ["Total Impressions"],
    datasets: [
        {
            label: ["Publication 1", "Publication 2"],
            backgroundColor: ["#971317","#0b72ba"],
            data: [30000,40000]
        }
    ]
};

window.onload = function() {

        var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');
    window.myBar = new Chart(ctx_webbanner_300x600, {
        type: 'bar',
        data: chartData_webbanner_300x600,
        options: {
            title: {
                display: true,
                text: 'Web Banner Impressions'
            },
            responsive: true,
        }
    });


}; //window.onload = function()

这是显示的方式（没有条）：

如果您对我做错了什么有任何想法，请告诉我。感谢您抽出宝贵时间提供帮助！

【问题讨论】：

标签： chart.js

【解决方案1】：

我能够使用此代码使其工作：

var graphData = {
    labels: ['Publication 1', 'Publication 2'],
    datasets: [{
      label: 'Impressions',
      data: [30000, 40000],
      backgroundColor: [
        "#971317",
        "#0b72ba"
      ],
    }, ]
  };

var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');

var chr = new Chart(ctx_webbanner_300x600, {
    data: graphData,
    type: 'bar',
    options: {
        scales: {
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true   // minimum value will be 0.
                    }
                }]
            }
                }
  });

这是基于我在这里找到的 Setting specific color per label in chart.js 和 How to set max and min value for Y axis - 它克服了规模从我的数据集中的最低值开始的问题。

【讨论】：