Question

我已经开始使用chart.js v2的最新测试版，因为我需要在同一个图表上绘制一个包含堆积条形图和未堆叠折线图的图表。这是我需要的一个例子：

在此图表中，线条未堆叠，均显示其自然值，但条形图堆叠在一起并显示值的总和（包括一些负值）。

我已经设法将两个图表绘制在一起，但到目前为止，我只是成功地将两个图表堆叠在一起，或者我必须使用两个单独的y轴，最终得到2个刻度。这个fiddle中有一个单独的y轴示例：

yAxes: [{
    stacked: false,
    ticks: {
      beginAtZero: true
    }
  }, {
    id: "bar-y-axis",
    stacked: true,
    ticks: {
      beginAtZero: true
    },
    type: 'linear'
  }]

如果我删除第一个y轴，那么我最终得到一个刻度，唯一的问题是线图现在也已堆叠。

有没有办法像使用chart.js一样绘制图表？

Answer 1

您可以通过为每个数据集设置不同的yAxisID（例如yAxisID: "bar-stacked"），然后添加第二个options.scales.yAxes对象来获得此功能。所以你将它作为一个数据集：

{
  label: 'Promoters',
  backgroundColor: "#aad700",
  yAxisID: "bar-stacked",
  data: [
    50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
  ]
}

然后你会添加一个额外的yAxes（第一个将是你的线数据集的集合[下面的例子中没有yAxisId]，第二个将是你想要堆叠的所有条形码）：< / p>

yAxes: [{
  stacked: false,
  ticks: {
    beginAtZero: true,
    min: 0,
    max: 100
  }
}, {
  id: "bar-stacked",
  stacked: true,
  display: false, //optional if both yAxes use the same scale
  ticks: {
    beginAtZero: true,
    min: 0,
    max: 100
  },
  type: 'linear'
}]

完整示例如下：

＆＃13;

<!doctype html>
<html>

<head>
  <title>Stacked Bar Chart</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div style="width: 100%">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var barChartData = {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        data: [
          50, 30, 60, 70, 80, 90, 95, 70, 90, 20, 60, 95
        ],
        type: 'line',
        label: 'This Year',
        fill: false,
        backgroundColor: "#fff",
        borderColor: "#70cbf4",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        lineTension: 0.3,
        pointBackgroundColor: "#fff",
        pointBorderColor: "#70cbf4",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#70cbf4",
        pointHoverBorderColor: "#70cbf4",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10
      }, {
        data: [
          25, 40, 30, 70, 60, 50, 40, 70, 40, 80, 30, 90
        ],
        type: 'line',
        label: 'Last Year',
        fill: false,
        backgroundColor: "#fff",
        borderColor: "#737373",
        borderCapStyle: 'butt',
        borderDash: [10, 10],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        lineTension: .3,
        pointBackgroundColor: "#fff",
        pointBorderColor: "#737373",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#737373",
        pointHoverBorderColor: "#737373",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10
      }, {
        label: 'Promoters',
        backgroundColor: "#aad700",
        yAxisID: "bar-y-axis",
        data: [
          50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
        ]
      }, {
        label: 'Passives',
        backgroundColor: "#ffe100",
        yAxisID: "bar-y-axis",
        data: [
          20, 21, 24, 25, 26, 17, 28, 19, 20, 11, 22, 33
        ]
      }, {
        label: 'Detractors',
        backgroundColor: "#ef0000",
        yAxisID: "bar-y-axis",
        data: [
          30, 35, 24, 13, 26, 25, 13, 31, 29, 37, 25, 13
        ]
      }]
    };

    window.onload = function() {
      var ctx = document.getElementById("canvas").getContext("2d");
      window.myBar = 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: false,
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100
              }
            }, {
              id: "bar-y-axis",
              stacked: true,
              display: false, //optional
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100
              },
              type: 'linear'
            }]
          }
        }
      });
    };
  </script>
</body>

</html>

＆＃13;

Answer 2

这里的另一个答案 - 你可以为你想要累积的数据（即只是条形）设置一个'堆栈'标识符，并关闭线图上的'填充'来绘制一条线而不是山脉

Chart.js remove stacking

Answer 3

您可以在条形数据集上设置stacked属性，因此线不会堆叠。尝试这样的事情：

 data: {
      datasets: [{
        label: 'Line 1',
        data: [],
        backgroundColor: '#3788d8cc',
        borderColor: '#3788d8cc',
        fill: false
      }, {
        label: 'Stacked bar 1',
        data: [],
        backgroundColor: '#e51c23',
        borderColor: '#e51c23',
        type: 'bar',
        stack: 'bar-stacked'
      }, {
        label: 'Line 2',
        data: [],
        backgroundColor: '#ff9800',
        borderColor: '#ff9800',
        fill: false
      },
      {
        label: 'Stacked bar 2',
        data: [],
        type: 'bar',
        backgroundColor: '#3f51b5',
        borderColor: '#3f51b5',
        stack: 'bar-stacked'
      }],
      labels: [],
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: true
      },
      scales: {
        xAxes: [{
          display: true
        }],
        yAxes: [{
          display: true
        }]
      }
    }

Chartjs 2 - 同一图表上具有相同y轴的堆积条和未堆叠线

3 个答案: