Question

Chart.js v2.x可以使用一个y轴生成一个带有2个未堆叠线的组合堆叠条形图吗？如果是这样，怎么样？

小提琴下面有2个y轴。如果右侧y轴的最大值为6000，则下降线会更好。

以下是供参考的代码。

        // set default no fill beneath the line
        Chart.defaults.global.elements.line.fill = false;


        // stacked bar with 2 unstacked lines - nope
        var barChartData = {
          labels: ['2016', '2017', '2018', '2019'],
          datasets: [{
            type: 'bar',
            label: 'a',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(217,83,79,0.75)",
            data: [1000, 2000, 4000, 5000]
          }, {
            type: 'bar',
            label: 'b',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(92,184,92,0.75)",
            data: [500, 600, 700, 800]
          }, {
            type: 'line',
            label: 'c',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(51,51,51,0.5)",
            data: [1500, 2600, 4700, 5800]
          }, {
            type: 'line',
            label: 'd',
            yAxisID: "y-axis-1",
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [5000, 3000, 1000, 0]
          }]
        };


        var ctx = document.getElementById("chart").getContext("2d");
        // allocate and initialize a chart
        var ch = new Chart(ctx, {
          type: 'bar',
          data: barChartData,
          options: {
            title: {
              display: true,
              text: "Chart.js Bar Chart - Stacked"
            },
            tooltips: {
              mode: 'label'
            },
            responsive: true,
            scales: {
              xAxes: [{
                stacked: true
              }],
              yAxes: [{
                stacked: true,
                position: "left",
                id: "y-axis-0",
              }, {
                stacked: false,
                position: "right",
                id: "y-axis-1",
              }]
            }
          }
        });

Answer 1

事实证明，我只需要一两个修改，以便2 y轴使用相同的比例。见jsfiddle。现在图表呈现更好。在我的例子中，关键是向ticks个对象添加yAxes节点和这两个属性：

ticks: {
   beginAtZero: true,
   suggestedMax: 5800
}

当然，suggestedMax值不会被硬编码。此外，由于2个比例现在相同，我使用此属性设置display: false隐藏了正确的比例。

正如小提琴所示，我们现在在叠加的条形图上有2个未堆叠的线条，很好地渲染。

Answer 2

使用此作为图表的数据：

var barData = {
                labels: ['test1','test2'],
                datasets: [
                    {
                        label: 'stack1',
                        backgroundColor: 'yellow',
                        borderColor: 'white',
                        borderWidth: 1,
                        stack: '1',
                        data: [5,4,3,2,1]
                      },
                      {
                        label: 'stack2',
                        backgroundColor: 'blue',
                        borderColor: 'white',
                        borderWidth: 1,
                        stack: '2',
                        data: [1,2,3,4,5]
                      }
                ]
            };

这是呈现数据的组件：

<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />

Chart.js v2 - 组合堆积条形图和2个未堆叠线条

2 个答案: