จัดการแผนภูมิสูงหลายแผนภูมิในหน้าเว็บเดียว

คุณสามารถใช้ jQuery.extend() และ Highcharts.setOptions ได้
ก่อนอื่น คุณจะต้องสร้างออบเจ็กต์แรกซึ่งจะขยายออกไปในแผนภูมิทั้งหมดของคุณ ออบเจ็กต์นี้จะมีฟังก์ชันเริ่มต้น Highchart ของคุณ

คุณสามารถทำได้โดยใช้เนมสเปซ
วิธีต่อไปนี้เป็นวิธีที่ดีเมื่อคุณมีแผนภูมิที่แตกต่างกันมาก

กราฟิกเริ่มต้น:

var defaultChart = {
    chartContent: null,
    highchart: null,
    defaults: {

        chart: {
            alignTicks: false,
            borderColor: '#656565',
            borderWidth: 1,
            zoomType: 'x',
            height: 400,
            width: 800
        },

        series: []

    },

    // here you'll merge the defauls with the object options

    init: function(options) {

        this.highchart= jQuery.extend({}, this.defaults, options);
        this.highchart.chart.renderTo = this.chartContent;
    },

    create: function() {

        new Highcharts.Chart(this.highchart);
    }

};

ตอนนี้ หากคุณต้องการสร้างแผนภูมิคอลัมน์ คุณจะต้องขยาย defaultChart

var columnChart = {

    chartContent: '#yourChartContent',
    options: {

        // your chart options
    }

};

columnChart = jQuery.extend(true, {}, defaultChart, columnChart);

// now columnChart has all defaultChart functions

// now you'll init the object with your chart options

columnChart.init(columnChart.options);

// when you want to create the chart you just call

columnChart.create();

หากคุณมีแผนภูมิที่คล้ายกัน ให้ใช้ Highcharts.setOptions ซึ่งจะใช้ตัวเลือกสำหรับแผนภูมิที่สร้างขึ้นทั้งหมดหลังจากนี้

// `options` will be used by all charts
Highcharts.setOptions(options);

// only data options
var chart1 = Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    series: []
});

var chart2 = Highcharts.Chart({
    chart: {
        renderTo: 'container2'
    },
    series: []
});

ข้อมูลอ้างอิง

• http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29

สาธิตให้เสร็จสิ้น

ฉันรู้ว่าสิ่งนี้ได้รับคำตอบแล้ว แต่ฉันรู้สึกว่าสามารถดำเนินการต่อไปได้ ฉันยังใหม่กับ JavaScript และ jQuery ดังนั้นหากใครพบสิ่งผิดปกติหรือคิดว่าแนวทางนี้ฝ่าฝืนหลักเกณฑ์หรือกฎเกณฑ์บางประการ ฉันจะขอบคุณสำหรับคำติชม

จากหลักการที่ Ricardo Lohmann อธิบายไว้ ฉันได้สร้างปลั๊กอิน jQuery ซึ่ง (ในความคิดของฉัน) ช่วยให้ Highcharts ทำงานกับ jQuery ได้อย่างราบรื่นมากขึ้น (เช่น วิธีที่ jQuery ทำงานร่วมกับวัตถุ HTML อื่น ๆ )

ฉันไม่เคยชอบความจริงที่ว่าคุณต้องระบุ object ID ให้กับ Highcharts ก่อนที่จะวาดแผนภูมิ ดังนั้นด้วยปลั๊กอิน ฉันสามารถกำหนดแผนภูมิให้กับออบเจ็กต์ตัวเลือก jQuery มาตรฐาน โดยไม่ต้องให้ค่าที่มี <div> กับ id

(function($){
    var chartType = {
        myArea : {
            chart: { type: 'area' },
            title: { text: 'Example Line Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        },
        myColumn : {
            chart: { type: 'column' },
            title: { text: 'Example Column Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        }
    };
    var methods = {
        init:
            function (chartName, options) {
                return this.each(function(i) {
                    optsThis = options[i];
                    chartType[chartName].chart.renderTo = this;
                    optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
                    new Highcharts.Chart (optsHighchart);
                });
            }
    };
    $.fn.cbhChart = function (action,objSettings) {
        if ( chartType[action] ) {
            return methods.init.apply( this, arguments );
        } else if ( methods[action] ) {
            return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        } else if ( typeof action === 'object' || !action ) {
            $.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
        } else {
           $.error( 'Action "' +  action + '" does not exist on jQuery.cbhChart' );
        }
    };
})(jQuery);

ด้วยปลั๊กอินนี้ ฉันสามารถกำหนดแผนภูมิได้ดังต่อไปนี้:

$('.columnChart').cbhChart('myColumn', optionsArray);

นี่เป็นตัวอย่างง่ายๆ แน่นอน สำหรับตัวอย่างจริง คุณจะต้องสร้างคุณสมบัติแผนภูมิที่ซับซ้อนมากขึ้น แต่หลักการที่เกี่ยวข้องกับเราในที่นี้ และฉันพบว่าแนวทางนี้ตอบคำถามเดิมได้ มันนำโค้ดกลับมาใช้ใหม่ ในขณะที่ยังคงอนุญาตให้ใช้การเปลี่ยนแปลงแผนภูมิแต่ละรายการแบบก้าวหน้าซ้อนทับกัน

โดยหลักการแล้ว ยังช่วยให้คุณสามารถจัดกลุ่มการเรียก Ajax หลายรายการเข้าด้วยกันเป็นรายการเดียว โดยพุชตัวเลือกและข้อมูลของกราฟแต่ละรายการลงในอาร์เรย์ JavaScript เดียว

ตัวอย่าง jFiddle ที่จำเป็นอยู่ที่นี่: http://jsfiddle.net/3GYHg/1/

น้อมรับคำติชม!!

หากต้องการเพิ่มคำตอบที่ยอดเยี่ยมของ @ Ricardo ฉันได้ทำอะไรที่คล้ายกันมากด้วย อันที่จริงฉันจะไม่ผิดถ้าฉันบอกว่าฉันไปไกลกว่านี้อีกขั้นหนึ่ง จึงอยากจะแบ่งปันแนวทาง

ฉันได้สร้าง wrapper บนไลบรารี highchart แล้ว สิ่งนี้ให้ประโยชน์หลายประการ ตามมาด้วยข้อได้เปรียบหลักที่สนับสนุนให้เดินไปในเส้นทางนี้

• การแยกส่วน: แยกโค้ดของคุณออกจาก Highchart
• อัปเกรดอย่างง่ายดาย: Wrapper นี้จะเป็นโค้ดเดียวที่จะต้องแก้ไขในกรณีที่มีการเปลี่ยนแปลงใดๆ ใน highchart api หลังจากอัปเกรด หรือแม้กระทั่งหากใครตัดสินใจย้ายไปยังไลบรารีการสร้างแผนภูมิอื่นโดยสิ้นเชิง (แม้จะจาก Highchart ถึง highstock อาจละเอียดถี่ถ้วนหากแอปพลิเคชันของคุณใช้แผนภูมิอย่างกว้างขวาง)
• ใช้งานง่าย: wrapper api นั้นเรียบง่ายมาก มีเพียงสิ่งที่อาจแตกต่างกันออกไปเท่านั้นที่จะถูกเปิดเผยเป็นตัวเลือก (ซึ่งค่าของมันจะไม่เหมือนกับวัตถุ js แบบลึกเช่น HC มีอยู่แล้ว ซึ่งส่วนใหญ่เป็น 1 ระดับ deep) แต่ละอันมีค่าเริ่มต้น ดังนั้นส่วนใหญ่แล้วการสร้างแผนภูมิของเรานั้นสั้นมาก โดยที่ Constructor รับวัตถุ 1 options ที่มีคุณสมบัติเพียง 4-5 รายการ ซึ่งค่าเริ่มต้นไม่เหมาะกับแผนภูมิที่อยู่ระหว่างการสร้าง
• UX ที่สอดคล้องกัน: รูปลักษณ์และการใช้งานที่สอดคล้องกันทั่วทั้งแอปพลิเคชัน เช่น รูปแบบและตำแหน่งของคำแนะนำเครื่องมือ สี ตระกูลแบบอักษร สี ปุ่มแถบเครื่องมือ (ส่งออก) ฯลฯ
• หลีกเลี่ยงการทำซ้ำ: แน่นอนว่าในฐานะคำตอบที่ถูกต้องของคำถามที่ถาม จะต้องหลีกเลี่ยงการทำซ้ำ และทำได้ในระดับมาก

นี่คือลักษณะที่ options มีลักษณะเป็นค่าเริ่มต้น

defaults : {
        chartType : "line", 
        startTime : 0,
        interval : 1000,
        chartData : [],
        title : "Product Name",
        navigator : true,
        legends : true,
        presetTimeRanges : [],
        primaryToolbarButtons : true,
        secondaryToolbarButtons : true,
        zoomX : true,
        zoomY : false,
        height : null,
        width : null,
        panning : false,
        reflow : false,
        yDecimals : 2,
        container : "container",
        allowFullScreen : true,
        credits : false,
        showAll : false,
        fontSize : "normal", // other option available is "small"
        showBtnsInNewTab : false,
        xAxisTitle : null,
        yAxisTitle : null,
        onLoad : null,
        pointMarkers : false,
        categories : []
}

อย่างที่คุณเห็น โดยส่วนใหญ่แล้ว chartData เท่านั้นที่เปลี่ยนแปลง แม้ว่าคุณจะต้องตั้งค่าคุณสมบัติบางอย่าง ส่วนใหญ่จะเป็นเพียงประเภท true/false เท่านั้น ไม่มีอะไรที่เหมือนกับความน่ากลัวที่ตัวสร้าง Highchart คาดหวัง (ไม่ได้วิจารณ์พวกเขา จำนวนตัวเลือกที่ให้นั้นน่าทึ่งมากจากการปรับแต่ง Point of View แต่สำหรับนักพัฒนาทุกคนใน ทีมงานจะเข้าใจและเชี่ยวชาญอาจต้องใช้เวลาสักระยะ)

ดังนั้นการสร้างแผนภูมิจึงเป็นเรื่องง่ายๆ

var chart=new myLib.Chart({
              chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
         });