Chartjs積み上げ棒グラフが正しく表示されない

Question

chartjを使用して積み上げ棒グラフを作成しようとしています。私は時系列的に分かれている時系列を持っています。これは、ある種の系列は時間の価値を持つことができますが、他の系列は価値がないことを意味します。このため、私はデータセットにx値を直接含めることにしましたが、ラベル配列としてではなく、グラフが正しくレンダリングされませんでした。私は問題はx軸スタッキングであると思い

var config = { 
     type:'bar', 
     data:{ 
      datasets:datasets 
     }, 
     options: { 
      responsive: true, 
      title:{ 
       display:true, 
       text:"MyChart" 
      }, 
      tooltips: { 
       mode: 'index' 
      }, 
      hover: { 
       mode: 'index' 
      }, 
      legend: { 
        position: 'bottom' 
      }, 
      elements: { point: { radius: 0 }}, 
      scales: { 
       xAxes: [{ 
        stacked: true, 
        type: 'time', 
        time: { 
         unit: 'minutes', 
         unitStepSize: 5, 
         displayFormats:{ 
          minutes:'HH:mm' 
         } 

        }, 
        scaleLabel: { 
         display: true, 
         labelString: 'Date' 
        } 
       }], 
       yAxes: [{ 
        stacked:true, 
        scaleLabel: { 
         display: true, 
         labelString: 'Resources Consumed' 
        } 
       }] 
      } 
     } 
    }; 

    var ctx = document.getElementById('session-sql-activity').getContext("2d"); 
    ctx.canvas.height = 300; 
    ctx.canvas.width = 800; 
    new Chart(ctx,config); 

：

は、ここに私のコードです。

ここに問題を説明するJSFiddleがあります。

https://jsfiddle.net/1kLyyjfp/

Answer 1

私は解決策はとにかくy軸の値を指定することだと思います。

{ 
    "y": 0, 
    "x": "2017-12-22 08:59" 
} 

結果のデータセットは次のとおりです。

[{ 
    "data": [{ 
     "y": 2, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 18, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#32AA09", 
    "label": "7726bj0dhtnmt" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 2, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#CF5A26", 
    "label": "0ks4u5nywjbdj" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 4, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#DA43AA", 
    "label": "1mnbsygj75jvx" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 2, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#5200A0", 
    "label": "39ymdt11ybwhz" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 2, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#925E44", 
    "label": "4v1whmzv76j2z" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 2, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#477BD4", 
    "label": "5sfyujuhwbj9n" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 4, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#272755", 
    "label": "6x0zvf2mw8t6g" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 2, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#F581E0", 
    "label": "7kpk62m5n8j9q" 
    }, { 
    "data": [{ 
     "y": 0, 
      "x": "2017-12-22 08:59" 
    }, { 
     "y": 20, 
      "x": "2017-12-22 09:00" 
    }], 
    "backgroundColor": "#4128A8", 
    "label": "7mwz4m103nn1k" 
}];