混合图表条形图不会显示

我必须用chartjs制作混合图表：线条图和条形图。混合图表条形图不会显示

该图表必须包含一个折线图，该月的平均温度。和条形图，消费一个月

我可以显示行数据，但不能显示条形图。

在这里，你有图表选项

var chartOptions = { 
    animation: { 
     easing: "easeOutBounce" 
    }, 
    legend: { 
     position: 'bottom' 
    }, 
    tooltips: { 
     mode: 'nearest', 
     intersect: false 
    }, 
    scales: { 
     xAxes: [{ 
      id: 'lineChart', 
      type: 'time', 
      unit: 'day', 
      unitStepSize: 1, 
      time: { 
       displayFormats: { 
        'millisecond': 'DD/MMMM/YYYY HH:mm', 
        'second': 'mm:ss', 
        'minute': 'HH:mm', 
        'hour': 'DD HH:mm', 
        'day': 'MMM DD', 
        'week': 'MMM DD', 
        'month': 'MMM DD', 
        'quarter': '[Q]Q - YYYY', 
        'year': 'YYYY', 
       } 
      }, 
      display: true, 
      position: 'bottom', 
      ticks: { 
       maxTicksLimit: 8 
      }, 
      scaleLabel: { 
       display: true, 
       labelString: "Heure", 
      } 
     }], 
     yAxes: [{ 
      id: 'consumption', 
      type: 'linear', 
      position: 'left', 
      ticks: { 
       beginAtZero: true 
      } 
     }, 
     { 
      id: 'temperature', 
      type: 'linear', 
      position: 'right', 
      ticks: { 
       beginAtZero: true 
      } 
     }] 
    } 
};

当添加一个线型图数据集，这里是配置：

{ 
    label: "Line", 
    type: 'line', 
    borderColor: color, 
    backgroundColor: color, 
    steppedLine: true, 
    fill: false, 
    xAxisID: "lineChart", 
    yAxisID: 'temperature', 
    pointRadius: 2, 
    lineTension: 0, 
    data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}] 
}

对于条形图：

{ 
     label: "Bar", 
     type: 'bar', 
     borderColor: color, 
     backgroundColor: color, 
     xAxisID: "lineChart", 
     yAxisID: 'consumption', 
     data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}] 
}

因此，如何有包含整月的条形图（如示例中的月份数据）或全天，取决于哪些数据电子图表采取？

这里是一个codepen：https://codepen.io/anon/pen/RLEJqV

来源

2017-10-18 Lollipop

更新到chart.js之2.7.0解决这个问题（我用chart.js之2.6.0）

来源

2017-10-18 14:30:32 Lollipop

混合图表条形图不会显示

回答

相关问题