2017-10-18 7 views
0

chartjs:linechartとbarchartを混在させてチャートを作成する必要があります。混合チャートbarchartは表示されません

グラフには、月の平均気温を示す線図が含まれている必要があります。 1ヶ月の消費を伴う棒グラフ

棒グラフは表示できません。

折れ線グラフのデータセットを追加する場合はここでは、グラフのオプションを持っている

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

持って、どのように(例のように月のデータの場合)または1日を含む棒グラフ電子カルテを取る?ここで

はcodepenです:Chart.js 2.7.0へhttps://codepen.io/anon/pen/RLEJqV

答えて

0

更新は、問題を解決(私はchart.js 2.6.0を使用)

関連する問題