Question

我使用Highcharts创建了2个饼图，但我复制了代码。

如何才能拥有一个基于代码的代码 - 在不同的json文件中调用。

var chart1 = {
                chart: {
                    renderTo: 'container1'

                },
                title: {
                    text: 'Industry'
                },

                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        showInLegend: true,
                        dataLabels: {
                            enabled: true,
                            formatter: function () {
                               return ' '+ this.y.toFixed(2) +' %';
                            },
                            color: 'black',
                            style: {
                                font: '100% Arial, Verdana, sans-serif'
                            }
                        }
                    }
                },
                credits: {
                    enabled: false,
                    text: 'Newton.co.uk'
                },
                legend: {
                    itemStyle: {
                        color: '#444',
                        fontWeight: 'normal',
                        fontFamily: 'Arial',
                        fontSize: '100%'
                    },

                    verticalAlign: 'bottom',
                    x: -100,
                    y: 0,
                    width: '100%',
                    itemWidth: 'auto',
                    floating: false,
                    labelFormatter: function () {
                        return this.name + ': ' + this.y.toFixed(2) + ' %'; 
                    },
                    borderWidth: 0,
                    margin: 0,
                    lineHeight: 50
                },
                series: []
            }

            var options = chart1;


                $.getJSON(link + "/valuations/industry.json", null, function (items) {
                var valuations = items.valuations;
                    var series = {
                        type: 'pie',
                        name: '',
                        data: []
                    };
                    console.log(valuations);
                $.each(valuations, function (itemNo, item) {
                    series.data.push({
                        name: item.id,
                        y: parseFloat(item.percentageMarketValue),
                        mv: item.marketValue
                    })
                });




                options.series.push(series);
                chart1 = new Highcharts.Chart(options);
                //chart.render();
            });


            var chart2 = {
                chart: {
                    renderTo: 'container2'

                },
                title: {
                    text: 'Geographic'
                },

                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
                    }
                },
                credits: {
                    enabled: false,
                    text: 'Newton.co.uk'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        showInLegend: true,
                        dataLabels: {
                            enabled: true,
                            formatter: function () {
                               return ' '+ this.y.toFixed(2) +' %';
                            },
                            color: 'black',
                            style: {
                                font: '100% Arial, Verdana, sans-serif'
                            }
                        }
                    }
                },
                legend: {
                    itemStyle: {
                        color: '#444',
                        fontWeight: 'normal',
                        fontFamily: 'Arial',
                        fontSize: '100%'
                    },

                    verticalAlign: 'bottom',
                    x: -100,
                    y: 0,
                    width: '100%',
                    itemWidth: 'auto',
                    floating: false,
                    labelFormatter: function () {
                        return this.name + ': ' + this.y.toFixed(2) + ' %';
                    },
                    borderWidth: 0,
                    margin: 0,
                    lineHeight: 50
                },
                series: []
            }

        var options2 = chart2;

                $.getJSON(link + "/valuations/geographic.json", null, function (items) {

                var valuations = items.valuations;
                    var series = {
                        type: 'pie',
                        name: '',
                        data: []
                    };
                $.each(valuations, function (itemNo, item) {
                    series.data.push({
                        name: item.id,
                        y: parseFloat(item.percentageMarketValue),
                        mv: item.marketValue
                    })
                });

                options2.series.push(series);
                chart2 = new Highcharts.Chart(options2);
                //chart.render();
            });




            Highcharts.setOptions({
                colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
            });


            $('#export').click(function() {
                Highcharts.exportCharts([chart1, chart2]);
            });

        });

Answer 1

参见代码注释：

// Define a default set of chart options
var defaultChart = {
    chart: {
        renderTo: 'chart'
    },
    title: {
        text: 'Chart'
    },
    plotArea: {
        shadow: null,
        borderWidth: null,
        backgroundColor: null
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            showInLegend: true,
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return ' ' + this.y.toFixed(2) + ' %';
                },
                color: 'black',
                style: {
                    font: '100% Arial, Verdana, sans-serif'
                }
            }
        }
    },
    credits: {
        enabled: false,
        text: 'Newton.co.uk'
    },
    legend: {
        itemStyle: {
            color: '#444',
            fontWeight: 'normal',
            fontFamily: 'Arial',
            fontSize: '100%'
        },

        verticalAlign: 'bottom',
        x: -100,
        y: 0,
        width: '100%',
        itemWidth: 'auto',
        floating: false,
        labelFormatter: function() {
            return this.name + ': ' + this.y.toFixed(2) + ' %';
        },
        borderWidth: 0,
        margin: 0,
        lineHeight: 50
    },
    series: []
};
// Create a function that will fetch the data and create the chart based on passed options
function makeChart( url, chart, options ) {
    $.getJSON(link + url, null, function(items) {
        var valuations = items.valuations;
        var series = {
            type: 'pie',
            name: '',
            data: []
        };
        $.each(valuations, function(itemNo, item) {
            series.data.push({
                name: item.id,
                y: parseFloat(item.percentageMarketValue),
                mv: item.marketValue
            })
        });

        options.series.push(series);
        chart = new Highcharts.Chart(options);
        //chart.render();
    });
}
//Set up chart1's custom options
var chart1 = {
    chart: {
        renderTo: 'container1'
    },
    title: {
        text: 'Industry'
    }
}
// Call our new function to make the chart
makeChart( "/valuations/industry.json", chart1, $.extend(true, {}, default_chart, chart1) );
// Setup chart2's custom options
var chart2 = {
    chart: {
        renderTo: 'container2'

    },
    title: {
        text: 'Geographic'
    }
}
// Call our new function to make the chart
makeChart( "/valuations/geographic.json", chart2, $.extend(true, {}, default_chart, chart2) );


Highcharts.setOptions({
    colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
});


$('#export').click(function() {
    Highcharts.exportCharts([chart1, chart2]);
});

Highcharts重复代码

1 个答案: