如何使用Chart.JS创建堆积条/水平图表?

时间:2016-09-20 17:13:31

标签: jquery html css charts chart.js2

我可以创造一个传统的"使用Chart.JS的条形图,甚至是一个如下所示的堆积条形图:

enter image description here

但是我需要创建一个运动水平而不是垂直的条形图,并在底部显示百分比,使用xlsxwriter创建下面的la this example

enter image description here

如何操纵Chart.JS来执行此命令的魔法?

更新

我将答案标记为正确,因为它显然有效,基于jsfiddle。但是我无法将数据堆叠起来。这就是我所看到的:

enter image description here

这是我的代码:

var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
var barChartData = {
    labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
    datasets: [
        {
            label: "Price Compliant",
            backgroundColor: "rgba(34,139,34,0.5)",
            hoverBackgroundColor: "rgba(34,139,34,1)",
            data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
        },
        {
            label: "Non-Compliant",
            backgroundColor: "rgba(255, 0, 0, 0.5)",
            hoverBackgroundColor: "rgba(255, 0, 0, 1)",
            data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
        }
    ]
}

var optionsBar = {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

var priceBarChart = new Chart(ctxBarChart, {
    type: 'horizontalBar',
    data: barChartData,
    options: optionsBar
});

我做错了什么?

注意:我也试过了:

var optionsBar = {
    stacked: true
};

......而且(戴着腰带吊带):

var optionsBar = {
    stacked: true,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

更新3

这有效(我不得不剥离其中一个选项级别):

var optionsBar = {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
};

1 个答案:

答案 0 :(得分:1)

  1. 如果要创建水平条而不是常规字符,可以使用type: 'horizontalBar'
  2. 要将图表创建为“堆叠栏”,您需要设置

  3. xAxes: [{
        stacked: true
    }],
    yAxes: [{
        stacked: true
    }]
    

    您可以使用此代码:

    var config = {
      type: 'horizontalBar',
      data: {
        labels: ["A", "B", "C", "D", "E"],
        datasets: [{
          label: "Dataset 1",
          backgroundColor: "rgba(154,178,96,0.5)",
          hoverBackgroundColor: "rgba(154,178,96,1)",
          data: [10, 15, 5, 81, 55],
        }, {
          label: "Dataset 2",
          backgroundColor: "rgba(197,213,167,0.5)",
          hoverBackgroundColor: "rgba(197,213,167,1)",
          data: [90, 85, 95, 19, 45]
        }]
      },
      options: {
        scales: {
          xAxes: [{
            stacked: true
          }],
          yAxes: [{
            stacked: true
          }]
        }
      }
    };
    
    var ctx = document.getElementById("myChart").getContext("2d");
    new Chart(ctx, config);
    

    这是一个有效的例子:
    https://jsfiddle.net/0xLxum4s/

    (出于某种原因,它在代码片段中不起作用,所以我使用了jsfiddle)。