Kelola beberapa grafik grafik tinggi dalam satu halaman web

Anda dapat menggunakan jQuery.extend() dan Highcharts.setOptions.
Jadi pertama-tama Anda akan membuat objek pertama yang akan diperluas oleh semua grafik Anda, objek ini akan berisi fungsi default Highchart Anda.

Anda dapat melakukannya menggunakan penspasian nama.
Cara berikut ini cocok bila Anda memiliki diagram yang sangat berbeda.

Grafik bawaan:

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

};

Sekarang, jika Anda ingin membuat bagan kolom, Anda akan memperluas 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();

Jika Anda memiliki bagan serupa, gunakan Highcharts.setOptions yang akan menerapkan opsi untuk semua bagan yang dibuat setelah ini.

// `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: []
});

Referensi

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

DEMO LENGKAP

Saya tahu ini sudah terjawab, tapi saya rasa ini masih bisa dilakukan lebih jauh. Saya masih pemula dalam JavaScript dan jQuery, jadi jika ada yang menemukan sesuatu yang salah, atau berpikir bahwa pendekatan ini melanggar pedoman atau aturan praktis, saya akan berterima kasih atas masukannya.

Berdasarkan prinsip-prinsip yang dijelaskan oleh Ricardo Lohmann, saya telah membuat plugin jQuery, yang (menurut saya) memungkinkan Highcharts bekerja lebih lancar dengan jQuery (yaitu cara jQuery bekerja dengan objek HTML lainnya).

Saya tidak pernah menyukai kenyataan bahwa Anda harus memberikan ID objek ke Highcharts sebelum menggambar grafik. Jadi dengan plug-in, saya dapat menetapkan bagan ke objek pemilih jQuery standar, tanpa harus memberikan nilai <div> dan id yang memuatnya.

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

Dengan plugin ini, saya sekarang dapat menetapkan grafik sebagai berikut:

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

Tentu saja ini adalah contoh sederhana; sebagai contoh nyata, Anda harus membuat properti bagan yang lebih kompleks. Namun prinsipnyalah yang menjadi perhatian kita di sini, dan menurut saya pendekatan ini menjawab pertanyaan awal. Ini menggunakan kembali kode, sambil tetap memungkinkan perubahan bagan individual diterapkan secara progresif di atas satu sama lain.

Pada prinsipnya, ini juga memungkinkan Anda mengelompokkan beberapa panggilan Ajax menjadi satu, memasukkan setiap opsi grafik dan data ke dalam satu larik JavaScript.

Contoh jFiddle wajib ada di sini: http://jsfiddle.net/3GYHg/1/

Kritik diterima!!

Untuk menambah jawaban hebat @ Ricardo, saya juga telah melakukan hal serupa. Sebenarnya, saya tidak salah jika saya mengatakan saya melangkah lebih jauh dari ini. Oleh karena itu saya ingin berbagi pendekatannya.

Saya telah membuat pembungkus perpustakaan highchart. Hal ini memberikan banyak manfaat, berikut keuntungan utama yang mendorong menempuh jalur ini

• Pemisahan: Memisahkan kode Anda dari grafik tinggi
• Peningkatan Mudah: Pembungkus ini akan menjadi satu-satunya kode yang memerlukan modifikasi jika terjadi perubahan apa pun yang dapat menyebabkan gangguan pada api highchart setelah peningkatan, atau bahkan jika seseorang memutuskan untuk pindah ke pustaka pembuatan grafik yang berbeda sama sekali (bahkan dari highchart hingga highstock bisa melelahkan jika aplikasi Anda menggunakan grafik secara ekstensif)
• Mudah digunakan: Api pembungkus dibuat sangat sederhana, hanya hal-hal yang mungkin berbeda yang diekspos sebagai opsi (Itu juga yang nilainya tidak sedalam objek js seperti yang sudah dimiliki HC, sebagian besar 1 level deep), masing-masing memiliki nilai default. Jadi seringkali pembuatan bagan kita sangat singkat, dengan konstruktor mengambil 1 options objek dengan hanya 4-5 properti yang defaultnya tidak sesuai dengan bagan yang sedang dibuat
• UX yang Konsisten: Tampilan & nuansa yang konsisten di seluruh aplikasi. misalnya: format & posisi tip alat, warna, jenis font, warna, tombol toolbar (ekspor), dll
• Hindari duplikasi: Tentu saja sebagai jawaban valid atas pertanyaan yang diajukan, ia harus menghindari duplikasi, dan hal ini sangat berpengaruh

Berikut tampilan options dengan nilai defaultnya

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 : []
}

Seperti yang Anda lihat, sering kali, hanya chartData yang berubah. Bahkan jika Anda perlu menyetel beberapa properti, sebagian besar hanya tipe benar/salah, tidak seperti kengerian yang diharapkan oleh konstruktor grafik tinggi (tidak mengkritiknya, jumlah opsi yang mereka berikan sungguh luar biasa dari Sudut Pandang penyesuaian, tetapi untuk setiap pengembang di tim untuk memahami & menguasainya memerlukan waktu)

Jadi pembuatan bagan itu sesederhana

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