我想使這個Javascript函數更有效嗎？

Question

我有三個使用Google Charts API生成的餅圖。 我想進一步壓縮此功能，因為有很多重復項。 有沒有我可以做的循環等等。

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);
        }

我嘗試執行以下操作：

var myVar, myVar1, myVar2 = [];

但我得到一個錯誤。 任何幫助都會很棒。

Answer 1

我花了一些時間來優化您的代碼，但未進行測試。 確保所有變量名都可以，並且不要在代碼上造成沖突

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);
    }
}

更新資料

添加更改顏色的可能性，在這種情況下，您無需將options用作自變量：

    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'
            }
        });
    }