js v2 -组合堆叠条形图和2个非堆叠线条

Chart.js v2 - combined stacked bar chart and 2 unstacked lines

本文关键字：2个 条形图 组合 v2 js      更新时间：2023-09-26

Can Chart.js v2。X生成一个组合堆叠条形图与2未堆叠线利用一个y轴?如果有，怎么做?

提琴下面有两个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",
              }]
            }
          }
        });

结果，我只需要修改一两个，以便两个y轴使用相同的比例。看看这个。现在图表呈现得更好了。在我的例子中，关键是将ticks节点和这两个属性添加到yAxes对象中:

ticks: {
   beginAtZero: true,
   suggestedMax: 5800
}

自然，suggestedMax值不会被硬编码。此外，由于两个刻度现在是相同的，我隐藏了这个属性设置display: false的正确刻度。

如图所示，我们现在在堆叠条形图上有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}}] } }}}} />
相关文章：