Le graphique à barres ne s'affiche pas.

Question

Je dois faire un graphique mixte avec chartjs: linechart et barchart.

La carte doit contenir un graphique, avec la température moyenne du mois. et un graphique à barres, avec une consommation d'un mois

Je peux afficher les données de ligne, mais pas le graphique à barres.

Ici vous avez les options graphiques

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 
      } 
     }] 
    } 
}; 

Lors de l'ajout d'un jeu de données LineChart, voici la configuration:

{ 
    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}] 
} 

Pour barchart:

{ 
     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}] 
} 

Alors, comment avoir graphique à barres qui contient un mois complet (pour les données mensuelles comme dans l'exemple) ou un jour entier, en fonction des données Le graphique prend-il?

Voici un codepen: https://codepen.io/anon/pen/RLEJqV

Answer 1

Mise à jour de Chart.js résoudre le problème 2.7.0 (i utilisé chart.js 2.6.0)