Chart.js删除堆栈 [英] Chart.js remove stacking

问题描述

我有一个堆积的条形图和两个折线图。第二个折线图是堆积在第一个折线图的顶部，但我不希望这种行为。

I have a stacked bar chart and two line charts. The second line chart is beeing stacked on top of the first line chart but I don't want this behaviour.

我尝试过的是显式设置堆栈模式

What I've tried is to explicitly set the stack mode on false ,but this option is not beeing executed.

            ...
            type: 'line',
            label: 'lineChart1',
            data: lineData1,
            borderWidth: 1,
            fill: false,
            options: {
              legend: {
                display: false
              },
              scales: {
                    xAxes: [{
                        stacked: false,
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            }
        }
        ...

推荐答案

下面是一个示例，该示例使用2个堆叠的条形图和2个un-s配置图表固定线。我认为您之所以会在折线图上堆叠，是因为您没有在栏中设置 stacked 选项来为他们提供堆叠ID。

Here is an example that configures a chart with 2 stacked bars and 2 un-stacked lines. I think the reason why you are getting stacking on your line charts is because you did not set the stacked option in your bars to give them a stack id.

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 1',
      borderColor: window.chartColors.green,
      borderWidth: 2,
      fill: false,
      data: [5, 3, 4, 10, 8, 9, 2]
    }, {
      type: 'line',
      label: 'Dataset 2',
      borderColor: window.chartColors.orange,
      borderWidth: 2,
      fill: false,
      data: [8, 5, 2, 8, 7, 2, 6]
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: window.chartColors.red,
      stack: 'Stack 0',
      data: [2, 4, 1, 3, 7, 3, 6],
      borderColor: 'white',
      borderWidth: 2
    }, {
      type: 'bar',
      label: 'Dataset 4',
      backgroundColor: window.chartColors.blue,
      stack: 'Stack 0',
      data: [7, 2, 4, 5, 6, 4, 2]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        stacked: true,
      }]
    }
  }
});

这里是 codepen示例，显示其外观。

这篇关于Chart.js删除堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！