Highcharts - Genel kod ve benzersiz verilerle genel yapılandırma ve Başlıklar

Question

Highcharts kullanıyorum.

Tek bir sayfada, farklı veri & başlıkları ve aynı grafik özellik yapılandırmalarıyla birden çok Area çizelgeye sahibim. Grafik 2 için Online Demo

Grafik 1'den Değişiklikler

, aşağıda Tablo 3:

• Serisi İsimler
• Serisi Veri
• Legend
.210
• ipucu veri
Yukarıdakilerin dışında

, her şey aynı ...

nasıl #chart-1, #chart-2, #chart-3 vb repetitve kod yazarken önlemek ... ve sadece unsurları yukarıda yapılandırabilirsiniz?

HTML:

<div id="chart-1" style="height: 200px; width: 500px"></div> 
<div id="chart-2" style="height: 200px; width: 500px"></div> 
<div id="chart-3" style="height: 200px; width: 500px"></div> 

Küresel başlatma:

jQuery(function() { 

    Highcharts.setOptions({ 
     colors: ['#fe5758', '#99cc03', '#33b5e6'], 
     chart: { 
      style: { 
       fontFamily: 'Roboto Light', 
       fontWeight: 'normal', 
       fontSize: '12px', 
       color: '#585858', 
      } 
     },  
     title: { text: null }, 
     subtitle: { text:null }, 
     credits: { enabled: false }, 
     exporting: { enabled: false }, 
...... 

Grafik 1:

$(function() { 
    $('#chart-1').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     xAxis: { 
      .... 

Grafik 2: Sen gibi ortak olan seçenekler için bir değişken yapabilirsiniz

$(function() { 
    $('#chart-2').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     xAxis: { 
      .... 

Answer 1

:

var commonOptions = { 
    chart: { 
     type: 'area' 
    }, 
    // ... 
}; 

Ve sonra böyle her grafik için belirli seçenekler birleştirme:

$('#container').highcharts(Highcharts.merge(commonOptions, { 
    series: [{ 
     name: 'Tokyo', 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }] 
    // ... 
})); 

Gösterge, araç ipucu ve dizi seçenekleriyle this JSFiddle example'a bakın.

Answer 2

createChart gibi işlevler oluşturmaya ne dersiniz? Ve değişkenlerden geçmek? Şunun gibi: http://jsfiddle.net/0s2pkps0/2/

newChart('#chart-1', 'Date', 'Count', series_1); 
newChart('#chart-2', 'Weekly report', 'Total views', series_2); 

function newChart(container, xAxisTitle, yAxisTitle, series) { 
    $(container).highcharts({ 
    chart: { 
     type: 'area' 
    }, 
    xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { 
     day: '%eth %b' 
     }, 
     title: { 
     text: xAxisTitle, 
     } 
    }, 

    yAxis: { 
     title: { 
     text: yAxisTitle 
     }, 
    }, 
    series: series 
    }); 
}