ChartJS 类型更改无法从饼图类型正常工作

Question

使用图表JS，

我想构建一个可以适应数据变化的图表。我还希望能够更改其类型：线形、条形或饼形。

我已经取得了一些进展，但遇到了一些错误。 首先，当我想使用稍微不同的数据结构（JSFiddle 上的 data3）更新图表时遇到错误。

错误：

“133:44 未捕获类型错误： 无法读取未定义的属性（读取“值”）”

另外，我最大的问题是，将图表更改为“饼图”模式后，如果更改为“折线”或“条形”，则图表将变得完全错误，并且形状更改不再有意义。我只想以与这些模式下的图表相同的方式返回折线/条形模式。我需要这方面的帮助。

对于饼图模式，我使用每个时间段的值的总和：

if (newType === "pie") {
temp.data.labels = temp.data.datasets.map(function(dataset) {
  return dataset.label;
});

temp.data.datasets = [{
  backgroundColor: temp.data.datasets.map(function(dataset) {
    return dataset.backgroundColor;
  }),
  data: temp.data.datasets.map(function(dataset) {
    return dataset.data.reduce((a, b) => a + b, 0);
  })
}];
}

您可以在这里查看并尝试：

我的JSFiddle：灵活的数据图表

感谢您的帮助

Answer 1

感谢基康！

var data0 = {
    axis: ["June", "July", "August", "September", "October", "November", "December"],
    values: [
        { id: 1, values: [1, 1, 2, 3, 4, 5, 6] },
        { id: 2, values: [1, 2, 4, 8, 3, 2, 4] },
        { id: 3, values: [1, 2, 4, 9, 3, 2, 9] }
    ]
}

var data1 = {
    axis: ["June", "July", "August"],
    values: [
        { id: 1, values: [2, 1, 3] },
        { id: 2, values: [4, 5, 6] },
        { id: 3, values: [8, 9, 7] }
    ]
};

var data2 = {
    axis: ["Monday", "Tuesday", "Wednesday", "Thursday"],
    values: [
        { id: 1, values: [10, 12, 11, 10] },
        { id: 2, values: [13, 9, 10, 10] },
        { id: 3, values: [8, 9, 7, 10] }
    ]
};

var data3 = {
    axis: ["Monday", "Tuesday", "Wednesday", "Thursday2"],
    values: [{ id: 0, values: [10, 12, 11, 10] }]
};

var config = {
    data: {
        datasets: [
            {
                label: "company1",
                fill: false,
                borderColor: "purple",
                backgroundColor: "purple"
            },
            {
                label: "company2",
                fill: false,
                borderColor: "green",
                backgroundColor: "green"
            },
            {
                label: "company3",
                fill: false,
                borderColor: "red",
                backgroundColor: "red"
            }
        ]
    },
    options: {
        responsive: true
    }
};

var myChart;
var currentDataIndex = 0;
var dataArr = [data0, data1, data2, data3];
var type = '';

$("#line").click(function() {
    type = 'line';
    mixDataConfig();
});

$("#bar").click(function() {
    type = 'bar';
    mixDataConfig();
});

$("#pie").click(function() {
    type = 'pie';
    mixDataConfig();
});

$("#switch").click(function() {
    currentDataIndex = (currentDataIndex + 1) % dataArr.length; // Increment index and wrap a
    mixDataConfig();
});

function mixDataConfig() {
    var currentData = dataArr[currentDataIndex];
    var ctx = document.getElementById("canvas").getContext("2d");

    // Remove the old chart and all its event handlers
    if (myChart) {
        myChart.destroy();
    }

    // Create a deep copy of the config object
    var temp = JSON.parse(JSON.stringify(config));
    temp.type = type;
    var nDatasets = currentData.values.length,
        configDatasets = temp.data.datasets.slice(0, nDatasets);
        // datasets from config object

    if(type === "line"){
        temp.data = {
            labels: currentData.axis,
            datasets: configDatasets.map(
                function(dataset, index){
                    return {
                        ...dataset,
                        //fill: true, // just testing
                        data: currentData.values[index].values
                    };
                }
            )
        }
    }
    else if(type === "bar"){
        temp.data = {
            labels: currentData.axis,
            datasets: configDatasets.map(
                function(dataset, index){
                    return {
                        ...dataset,
                        data: currentData.values[index].values
                    };
                }
            )
        }
    }
    else/* if(type === "pie")*/{
        temp.data.labels = configDatasets.map(({label}) => label);
        temp.data.datasets = [{
            backgroundColor: configDatasets.map(function(dataset) {
                return dataset.backgroundColor;
            }),
            data: currentData.values.map(function(value) {
                return value.values.reduce((a, b) => a + b, 0);
            })
        }];
    }

    myChart = new Chart(ctx, temp);
}