web-dev-qa-db-ja.com

1つのWebページで複数のハイチャートチャートを管理する

単一のWebページにさまざまなタイプ（棒、円グラフ、散布図タイプ）の複数のハイチャートチャートがあります。現在、私は次のような各グラフの設定オブジェクトを作成しています

_{
chart : {},
blah blah,
}
_

そして、HighCharts.chart()を呼び出すカスタム関数にそれらを与えます。しかし、これはコードの重複をもたらします。このすべてのチャートレンダリングロジックを一元的に管理したいと思います。

これを行う方法に関するアイデアはありますか？

highchartshighstock
26
Selvaraj M A

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

参照

COMPLETE DEMO

42
Ricardo Alvaro Lohmann

これはすでに回答されていることは知っていますが、さらに先に進むことができると思います。私はまだJavaScriptとjQueryに慣れていないので、誰かが何か間違ったことを見つけた場合、またはこのアプローチが何らかのガイドラインや経験則に違反していると思う場合は、フィードバックに感謝します。

Ricardo Lohmannによって記述された原則に基づいて、私はjQueryプラグインを作成しました。これにより、HighchartsはjQueryとよりシームレスに連携できるようになります（つまり、jQueryが他のHTMLオブジェクトと連携する方法）。

Highchartsがチャートを描画する前にオブジェクトIDを提供する必要があるという事実を、私は一度も気に入ったことがありません。そのため、プラグインを使用すると、チャートを標準の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呼び出しを1つにグループ化して、各グラフのオプションとデータを1つのJavaScript配列にプッシュすることもできます。

必須のjFiddleの例は次のとおりです。 http://jsfiddle.net/3GYHg/1/

批評歓迎!!

6
cartbeforehorse

@Ricardoのすばらしい答えに追加するために、私は非常に似たようなこともしました。実際、これよりも一歩進んだと言っても間違いではありません。したがって、アプローチを共有したいと思います。

ハイチャートライブラリのラッパーを作成しました。これは、この道を進むことを奨励した主な利点であるため、複数の利点をもたらします

  • デカップリング：ハイチャートからコードを切り離します
  • Easy Upgrades：このラッパーは、アップグレード後にhighchart APIに重大な変更があった場合、または異なるチャートライブラリに移動することを決定した場合でも（highchartからでも）変更が必要な唯一のコードになりますアプリケーションがチャートを広範囲に使用している場合は、highstockへのすべてが網羅されます）
  • 使いやすさ：ラッパーAPIは非常にシンプルに保たれ、変化する可能性のあるもののみがオプションとして公開されます（その値も、HCのような深いjsオブジェクトとしてはなく、ほとんどが1レベルです）深い）、それぞれにデフォルト値があります。そのため、ほとんどの場合、グラフの作成は非常に短く、コンストラクターは、デフォルトが作成中のグラフに適さない4〜5個のプロパティを持つ1つのoptionsオブジェクトを取得します。
  • 一貫した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コンストラクターが期待する恐怖のようなものではありません（批評することではなく、提供するオプションの量はカスタマイズの観点から驚くほどですが、すべての開発者にとってチームが理解して習得するには時間がかかることがあります）

チャートの作成は次のように簡単です

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