Question

我有一个同时包含折线图和条形图的混合图表。可以不显示两个y轴，而一个y轴显示在图表的左侧，而另一个y轴显示在图表的右侧，则可以在左侧显示两个y轴，但是有一个上方和下方？就像有两个图表-上面一个图表和下面一个图表-区别在于它们共享相同的x轴。

到目前为止，这是我的代码。

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    datasets: [{
      label: 'Bar Dataset',
      yAxisID: 'A',
      data: [10, 20, 30, 40]
    }, {
      label: 'Line Dataset',
      yAxisID: 'B',
      data: [100, 90, 70, 75],
      type: 'line',
      fill: "start"
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
          id: "A",
          position: 'right',
          gridLines: {
            display: true
          },
          ticks: {
            display: true,
            fontFamily: myfont,
            fontSize: myfontsize,
            min: 0,
            max: 100
          }
        },
        {
          id: "B",
          position: 'left',
          gridLines: {
            display: true,
          },
          ticks: {
            reverse: true,
            display: true,
            fontFamily: myfont,
            fontSize: myfontsize,
            min: 0,
            max: 100
          }
        }
      ],
      xAxes: [{
        id: "x-axis-0",
        gridLines: {
          display: false
        },
      }]
    }
  }
});

Answer 1

您可以使用两个画布，每个图表一个。

您可以使用options2.scales.xAxes[0].display = true隐藏上方图表的xAxis。

并且您必须注意偏移量。两者都需要偏移量或都不需要偏移量，因为条形图没有偏移量，折线图没有。 options2.scales.xAxes[0].offset = false或反之，offset = true for the other chart。

Full functional example in JSBin

使用chart.js堆叠两个y轴

1 个答案: