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

更新

添加更改颜色的可能性，在这种情况下，您不需要将选项用作自变量：

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

我想让这个Javascript函数更有效率？

1 个答案: