如何在不重复代码的情况下显示 2 个相同的 highcharts答案

【问题标题】：how to display 2 same highcharts without duplicate the code如何在不重复代码的情况下显示 2 个相同的 highcharts
【发布时间】：2017-06-19 08:20:41
【问题描述】：

我有 2 个内容相同的 div，我想在 2 个 div 内显示相同的饼图，但是只显示第一个，我知道复制 js 代码并使 id 像 #container1，# container2，但是有没有办法避免代码重复。谢谢。

这里是js：

$(document).ready(function () {

    // Build the chart
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    });

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    });
});

还有 HTML：

<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>

【问题讨论】：

$('elementA').add('elementB').highcharts({ /* ...configs... */);

标签： javascript jquery html highcharts

【解决方案1】：

您可以定义一次Highchart配置对象并多次使用它，如下所示：

$(document).ready(function () {
    // Using classes to select multiple containers
    var $containers = $(".container");
    // You just set the configuration object once
    var chartConfig = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    };
    // And then for every container init Hightchart with the same object 
    $containers.each(function() {
      $(this).highcharts(chartConfig);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>


<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>

【讨论】：