我想使这个Javascript函数更有效吗？

Question

I have three pie charts being generated using Google Charts API. I want to compress this function further as there is a lot of duplication. Is there a loop I can make for it etc.

if (data) {
            var myVar = [];
            var myVar1 = [];
            var myVar2 = [];

            myVar.push(['Label', 'Value']);
            myVar1.push(['Label', 'Value']);
            myVar2.push(['Label', 'Value']);

            myVar.push(['Car Sales Today', data.salesToday, ]);
            myVar1.push(['Car Sales Yesterday', data.salesYesterday]);
            myVar2.push(['Car Sales Last Week', data.salesLastWeek]);

            var build1 = {
                package: 'PieChart',
                data: myVar,
                customTooltips: [
                    data.salesToday,
                ],
                container: 'today-sales-chart',
                options: {
                    width: 'auto',
                    height: 300,
                    chartArea: { width: '50%', height: '80%' },
                    yAxis: { textPosition: 'none' },
                    legend: { position: "bottom" },
                    tooltip: { isHtml: true },
                    colors: ['#e6dc39'],
                    pieSliceText: 'none'
                }
            };
            var build2 = {
                package: 'PieChart',
                data: myVar1,
                customTooltips: [
                    data.salesYesterday,
                ],
                container: 'yesterday-sales-chart',
                options: {
                    width: 'auto',
                    height: 300,
                    chartArea: { width: '50%', height: '80%' },
                    yAxis: { textPosition: 'none' },
                    legend: { position: "bottom" },
                    tooltip: { isHtml: true },
                    colors: ['#33bb18'],
                    pieSliceText: 'none'
                }
            };
            var build3 = {
                package: 'PieChart',
                data: myVar2,
                customTooltips: [
                    data.salesLastWeek
                ],
                container: 'lastweek-sales-chart',
                options: {
                    width: 'auto',
                    height: 300,
                    chartArea: { width: '50%', height: '80%' },
                    yAxis: { textPosition: 'none' },
                    legend: { position: "bottom" },
                    tooltip: { isHtml: true },
                    colors: ['#e06e29'],
                    pieSliceText: 'none'
                }
            };
            charts.push(build1, build2, build3);
            google.setOnLoadCallback.drawCharts(build1.container);
            google.setOnLoadCallback.drawCharts(build2.container);
            google.setOnLoadCallback.drawCharts(build3.container);
        }

I tried to do the following for example:

var myVar, myVar1, myVar2 = [];

but I get an error. Any help would be great.

Answer 1

I took some time to optimize your code, but I didn't test it. make sure all the variable names are ok, and don't make a conflict on your code

if (data) {
    var allData = [{
            arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]],
            container : 'today-sales-chart',
            customTooltips: data.salesToday
        }
        ,{
            arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]],
            container : 'yesterday-sales-chart',
            customTooltips: data.salesYesterday
        }
        ,{
            arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]],
            container : 'lastweek-sales-chart',
            customTooltips: data.salesLastWeek
        }
    ];

    var options = {
        width: 'auto',
        height: 300,
        chartArea: { width: '50%', height: '80%' },
        yAxis: { textPosition: 'none' },
        legend: { position: "bottom" },
        tooltip: { isHtml: true },
        colors: ['#e6dc39'],
        pieSliceText: 'none'
    }

    var builds = [];
    for (var index in allData) {
        builds.push({
            package: 'PieChart',
            data: allData[index].arr,
            customTooltips: [ allData[index].customTooltips ],
            container: allData[index].container,
            options: options
        });
    }

    for(var index in builds) {
        charts.push(builds[index]);
        google.setOnLoadCallback.drawCharts(builds[index].container);
    }
}

Update

to add the possibility to change the color, in this case you don't need to use options as an independent variable :

    var builds = [];
    for (var index in allData) {
        builds.push({
            package: 'PieChart',
            data: allData[index].arr,
            customTooltips: [ allData[index].customTooltips ],
            container: allData[index].container,
            options: {
                width: 'auto',
                height: 300,
                chartArea: { width: '50%', height: '80%' },
                yAxis: { textPosition: 'none' },
                legend: { position: "bottom" },
                tooltip: { isHtml: true },
                colors: allData[index].color, // <--- you set the color here
                pieSliceText: 'none'
            }
        });
    }