2

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

下面的小提琴有2个y轴。如果右 y 轴和左轴一样具有最大值 6000，则下降线会渲染得更好。

jsfiddle 示例。

以下是供参考的代码。

        // 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",
              }]
            }
          }
        });
4

2 回答 2

1

事实证明，我只需要一两次修改，以便 2 y 轴使用相同的比例。看到这个jsfiddle。现在图表渲染得更好了。就我而言，关键是向ticks两个对象添加一个节点和这两个属性yAxes：

ticks: {
   beginAtZero: true,
   suggestedMax: 5800
}

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

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

于 2016-11-06T20:35:20.833 回答
0

将此用作图表的数据：

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}}] } }}}} />
于 2018-05-08T11:22:37.920 回答