動的にJavaScriptで棒グラフのための移入データ出力までの配列を使用して

roa765：

私はchart.js JavaScriptライブラリを使用してバースタックのグラフを作成しようとしています。私は現在、以下のものを含むJavaScriptの配列を持っています：

0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"}
1: {labels: "01/01/2020 00:00:00", data: 774, category: "B"}
2: {labels: "01/01/2020 00:00:00", data: 5993, category: "C"}
3: {labels: "30/01/2020 00:00:00", data: 7624, category: "A"}
4: {labels: "30/01/2020 00:00:00", data: 900, category: "B"}
5: {labels: "30/01/2020 00:00:00", data: 5865, category: "C"}
6: {labels: "18/02/2020 00:00:00", data: 7161, category: "A"}
7: {labels: "18/02/2020 00:00:00", data: 1005, category: "B"}
8: {labels: "18/02/2020 00:00:00", data: 5940, category: "C"}

以下は、配列にデータを置くためにAJAX要求であり、今私は、動的に出力スタックチャートにデータを設定する必要があります

 // STACK BAR CHART
var stackBarData = [];
var stackBarLabels = [];

$.ajax({
    type: "POST",
    async: false,
    url: "ExecView.aspx/ReturnStackBarData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var stackbarDatas = data.d;
        stackBarData = new Array(stackbarDatas.length);

        console.log(stackBarData);

        for (i = 0; i < stackbarDatas.length; i++) {

            stackBarData[i] = { labels: stackbarDatas[i].label, data: stackbarDatas[i].data, category: stackbarDatas[i].category };
        }

        console.log(stackBarData); // ARRAY OUTPUT ABOVE




    }
});


var BarpopData = {
    datasets: [{
        data: stackBarData
    }],



};

私は、私は、その後、私は、カテゴリBは、データ774との中間のスタックであることを期待01/01/20と、アレイ内のすべてのデータがデータ7433.と最低のスタックであることをX軸、カテゴリーAの私の最初のラベルであることを期待しますカテゴリC iは、日付と30/01/2020データを別のバースタックを期待するデータ5933.で最高のスタックであることを期待しています。

私は、これは、データは常に変化として配列を見て動的にする必要があります。

確実に最小値と最大値Yは、オートがそうであるショーの良いバースタックグラフで、軸 - どのように私は動的にこれを行うことができますか？

私はJSフィドルを持っている：https://jsfiddle.net/1eq8w0Lx/私は結果が見えるように期待するものを。私は配列から動的にする、ハードコードされた値を必要としています。どのように私はこの出力を達成していますか？

変更胡：

まず第一に、彼らは正しい順序であるようにするソートデータ：

const priority = ['A', 'B', 'C']
data.sort((a, b) => {
  const aDate = new Date(a.labels).getTime()
  const bDate = new Date(b.labels).getTime()
  if (aDate === bDate) {
    return priority.indexOf(a.category) - priority.indexOf(b.category)
  }
  return aDate - bDate
})

labels取得するのは簡単です：

const labels = [...new Set(data.map(el => el.labels.slice(0, -9)))]

datasetsその順序は、配列と同じであるべきですpriority。

const datasets = priority.map(p => ({ label: p, data: [] }))
for (const d of data) {
  const index = priority.indexOf(d.category)
  datasets[index].data.push(d.data)
}