创建可重用的 Chartjs 函数

Question

我有以下 javascript Chartjs 代码，当我在 django 模板中使用它时效果很好。但是，此模板适用于仪表板，我需要重新创建 7 个相同的图表。因此，我可以将其重新配置为某种函数并调用它，而不是多次重新创建此代码？

    var ctx_category_driving = document.getElementById('myChart_Category_Drving').getContext('2d');
    
    var data = {
                // labels: ["Chocolate", "Vanilla", "Strawberry"],
                labels: {{ lbl_category_driving|safe }},
                datasets: [
                    {
                        label: "acceptable",
                        // backgroundColor: "blue",
                        data: {{ data_cat_driving_acceptable|safe }},
                        fill: true,

                        // backgroundColor: "rgba(179,181,198,0.2)",
                        backgroundColor: "#3cba9f",
                        borderColor: "rgba(179,181,198,1)",
                        pointBorderColor: "#fff",
                        pointBackgroundColor: "rgba(179,181,198,1)",
                    },
                    {
                        label: "unacceptable",
                        // backgroundColor: "red",
                        data: {{ data_cat_driving_unacceptable|safe }},
                        fill: true,

                        // backgroundColor: "rgba(255,99,132,0.2)",
                        // backgroundColor: "rgba(216, 27, 96, 0.6)",
                        backgroundColor: "rgba(216, 27, 96, 0.6)",
                        borderColor: "rgba(255,99,132,1)",
                        pointBorderColor: "#fff",
                        pointBackgroundColor: "rgba(255,99,132,1)",
                        pointBorderColor: "#fff",
                    },

                ]
            };

    var myBarChart = new Chart(ctx_category_driving, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    });

一旦重新配置，我将如何调用它以使其可重复使用？任何帮助都将不胜感激，因为我现在正在学习 Django 和各种网络技术。

Answer 1

你可以做一个简单的函数，将配置和画布作为参数，然后像这样返回图表：

var ctx_category_driving = document.getElementById('myChart_Category_Drving').getContext('2d');
    
var data = {
    // labels: ["Chocolate", "Vanilla", "Strawberry"],
    labels: {{ lbl_category_driving|safe }},
    datasets: [
        {
            label: "acceptable",
            // backgroundColor: "blue",
            data: {{ data_cat_driving_acceptable|safe }},
            fill: true,

            // backgroundColor: "rgba(179,181,198,0.2)",
            backgroundColor: "#3cba9f",
            borderColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(179,181,198,1)",
        },
        {
            label: "unacceptable",
            // backgroundColor: "red",
            data: {{ data_cat_driving_unacceptable|safe }},
            fill: true,

            // backgroundColor: "rgba(255,99,132,0.2)",
            // backgroundColor: "rgba(216, 27, 96, 0.6)",
            backgroundColor: "rgba(216, 27, 96, 0.6)",
            borderColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
        },

    ]
};

function createChart(ctx, data) {
    return new Chart(ctx,  {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}

var myBarChart = createChart(ctx_category_driving, data)

如果所有 7 个图表的数据也相同，您也可以将其放入函数中，如下所示：

var barChart =  createChart()
    

function createChart() {
    return new Chart(document.getElementById('myChart_Category_Drving').getContext('2d'),  {
        type: 'bar',
        data: {
            // labels: ["Chocolate", "Vanilla", "Strawberry"],
            labels: {{ lbl_category_driving|safe }},
            datasets: [
                {
                    label: "acceptable",
                    // backgroundColor: "blue",
                    data: {{ data_cat_driving_acceptable|safe }},
                    fill: true,

                    // backgroundColor: "rgba(179,181,198,0.2)",
                    backgroundColor: "#3cba9f",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                },
                {
                    label: "unacceptable",
                    // backgroundColor: "red",
                    data: {{ data_cat_driving_unacceptable|safe }},
                    fill: true,

                    // backgroundColor: "rgba(255,99,132,0.2)",
                    // backgroundColor: "rgba(216, 27, 96, 0.6)",
                    backgroundColor: "rgba(216, 27, 96, 0.6)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                },

            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}

Answer 2

感谢您迄今为止的所有帮助。

我认为我需要混合您提供的解决方案，因为所有数据值和标签都应传递给 javascript 函数。我试图在下面的代码中这样做，但由于图表是空白的，所以它不起作用。如果可以的话，你能看看并提供一些进一步的指导吗？

<script>
 //category charts  as function 
 
function createChart(chart_element, lbl, data_acceptable, data_unacceptable) {
    return new Chart(document.getElementById(chart_element).getContext('2d'),  {
        type: 'bar',
        data: {
            // labels: ["Chocolate", "Vanilla", "Strawberry"],
            labels: lbl,
            datasets: [
                {
                    label: "acceptable",
                    // backgroundColor: "blue",
                    data: data_acceptable,
                    fill: true,

                    // backgroundColor: "rgba(179,181,198,0.2)",
                    backgroundColor: "#3cba9f",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                },
                {
                    label: "unacceptable",
                    // backgroundColor: "red",
                    data: data_unacceptable,
                    fill: true,

                    // backgroundColor: "rgba(255,99,132,0.2)",
                    // backgroundColor: "rgba(216, 27, 96, 0.6)",
                    backgroundColor: "rgba(216, 27, 96, 0.6)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                },

            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}


var lbl_driving = {{ lbl_category_driving|safe }},
var data_driving_acceptable = {{ data_cat_driving_acceptable|safe }}
var data_driving_unacceptable = {{ data_cat_driving_unacceptable|safe }},

var canvas_driving = document.getElementById('myChart_Category_Drving').value;

var barChartGrp_Driving =  createChart( canvas_driving, lbl_driving, data_driving_acceptable, data_driving_unacceptable )



</script>