Question

我正在尝试使用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()

这是显示方式（无条形）：

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

Answer 1

我能够通过以下代码使用它：

.txt

这是基于我在Setting specific color per label in chart.js和此处How to set max and min value for Y axis所找到的内容-克服了一个问题，即刻度从数据集中的最低值开始。

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

1 个答案: