无法使用 chart.js 2.7 生成多轴组合图（条形图/线形图）

Question

我在尝试使用 chart.js 2.7.2 生成组合条形图/折线图时遇到问题。

目前我可以渲染图表，但是条形图不可见，如附图所示。

Combo Chart with problem

请注意，上图中，“Data1”对应要绘制在左侧 Y 轴上的折线图，“Data2”对应要绘制在右侧 Y 轴上的条形图。

另请注意，工具提示确实显示“Data2”系列，但它在图表上不可见！

在用于生成图表的 javascript 代码下方。它在一个简单的 html 文档中使用画布。

    var x_time  = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
    var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
    var y_data2 = ['56', '41', '53', '46', '70', '60'];
    new Chart(document.getElementById('myChart').getContext('2d'), {
    data: {
        labels: x_time,
        datasets: [{ 
            type:'line',
            label: 'Data1',
            fill:false,
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: y_data1,
            yAxisID: 'left-axis'
        }, {
            type: 'bar',
            label: 'Data2',
            fill: true,
            backgroundColor: 'rgb(54, 162, 235)',
            borderColor: 'rgb(54, 162, 235)',
            data: y_data2,
            yAxisID: 'right-axis'
        }]
    },
    options: {
        legend: {position:'bottom', usePointStyle:true},
        maintainAspectRatio:false,
        responsive: true,
        title: {display: false},
        tooltips: {mode: 'index', intersect: false},
        hover: {mode: 'nearest', intersect: true},
        scales: {
            xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
            yAxes: [{
                    type:'linear', 
                    id:'left-axis', 
                    display: true, 
                    position: 'left', 
                    scaleLabel: {display: true, labelString: '%'}
                    },{
                    type:'linear', 
                    id:'right-axis', 
                    display: true, 
                    position: 'right', 
                    stacked:false,
                    scaleLabel: {display: true, labelString: '#'}, 
                    gridLines: {drawOnChartArea:false}
                }]

        }
    }
});

对此的任何帮助将不胜感激。

Answer 1

需要在顶层定义整体图表类型，
然后您在数据集级别更改其中一种类型

  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'bar',  // <-- define overall chart type - top level
    data: {
      labels: x_time,
      datasets: [{
        type:'line',  // <-- define dataset type
        ...

请参阅以下工作 sn-p...

  var x_time  = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
  var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
  var y_data2 = ['56', '41', '53', '46', '70', '60'];
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'bar',  // <-- define overall chart type
    data: {
      labels: x_time,
      datasets: [{
        type:'line',
        label: 'Data1',
        fill:false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: y_data1,
        yAxisID: 'left-axis'
      }, {
        label: 'Data2',
        fill: true,
        backgroundColor: 'rgb(54, 162, 235)',
        borderColor: 'rgb(54, 162, 235)',
        data: y_data2,
        yAxisID: 'right-axis'
      }]
    },
    options: {
      legend: {position:'bottom', usePointStyle:true},
      maintainAspectRatio:false,
      responsive: true,
      title: {display: false},
      tooltips: {mode: 'index', intersect: false},
      hover: {mode: 'nearest', intersect: true},
      scales: {
        xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
        yAxes: [{
          type:'linear',
          id:'left-axis',
          display: true,
          position: 'left',
          scaleLabel: {display: true, labelString: '%'}
        },{
          type:'linear',
          id:'right-axis',
          display: true,
          position: 'right',
          stacked:false,
          scaleLabel: {display: true, labelString: '#'},
          gridLines: {drawOnChartArea:false}
        }]
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>