javascript - ハイチャートでXYズームを使用しているときに、選択されていない系列と軸を非表示にするにはどうすればよいですか?

原文 javascript jquery highcharts highstock

ハイチャート(特にハイストック)を使用して、さまざまなタイプのデータをグラフ化しています。 XYズームタイプを利用したいと思いますが、選択ボックスで選択されたものだけにズームインできればすばらしいと思います。

ただし、XYを使用してズームインした場合、別の軸でデータを選択しないと、軸には何も表示されません。強調表示/選択された領域がグラフ全体に再描画されると理想的です。

ブラウザコンソールウィンドウでグラフオブジェクトを確認してみましたが、 "series [x] .visible"などの値は、ズーム後のすべての軸で同じです。私が求めていることを達成することさえ可能ですか?

編集:表示するデータの量が多いために、グラフを互いに重ねないようにする必要があることに注意してください。これが、2つのグラフが独立して表示される理由です。

フィドル:http://jsfiddle.net/cwc4em4w/

$('#container').highcharts({
    chart: {
        type: 'line',
        rightMargin: 80,
        zoomType: 'xy'
    },        

    yAxis: [{
        id: 'hi',
        height: '40%',
        top: '10%',
        title: { text: 'label 1', y: 0, x: -30, align: 'middle' },
        labels: { align: 'left', x: -25 }
    }, {
        id: 'ho',
        height: '40%',
        top: '60%',
        title: { text: 'label 2', y: 0, x: 0, align: 'middle' },
        labels: { align: 'left', x: 0 }
    }],

    xAxis: [{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        data: [129.9, 171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }]
});
答え
はい、可能ですが、手動で処理するだけです:see this fiddle

説明されている動作を実現するには、次のupdate the yAxis propertieslegend item click handlerできます。

plotOptions: {
    series: {
        events: {
            legendItemClick: function (e) {
                var thisIndex = this.index;
                var otherIndex = (this.index == 0) ? 1 : 0;
                var isOtherEnabled = false;
                if (this.chart.yAxis[otherIndex].options.labels.enabled) {
                    isOtherEnabled = true;
                }
                var isThisEnabled = false;
                if (this.chart.yAxis[thisIndex].options.labels.enabled) {
                    isThisEnabled = true;
                }

                if (isThisEnabled) {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '80%',
                            top: '10%'
                        });
                    }
                } else {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: true
                        },
                        title: {
                            text: (thisIndex == 0) ? 'label 1' : 'label 2'
                        },
                        height: (isOtherEnabled) ? '40%' : '80%',
                        top: (isOtherEnabled) ? ((thisIndex == 0) ? '10%' : '60%') : '10%'
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '40%',
                            top: (otherIndex == 0) ? '10%' : '60%'
                        }); 
                    }
                }
                this.chart.reflow();
            }
        }
    }
},


さらに、yAxisxを変更してyラベルの位置を揃えようとしているのを見ました。ただし、他の軸を基準にして配置されます。つまり、最初に上記のスニペットを適用するとき、2番目のシリーズを非表示にすると、label 1タイトルは表示されません。これは、ハイチャートコンテナーの外側に配置されるためです。この問題を解決するには、yAxis.offsetだけでなくits title relative offsetも正しく配置してください。

yAxis: [{
    id: 'hi',
    height: '40%',
    top: '10%',
    offset: 30,
    title: { text: 'label 1', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}, {
    id: 'ho',
    height: '40%',
    top: '60%',
    offset: 30,
    title: { text: 'label 2', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}],
関連記事

javascript - PHPストリームWebソケット

javascript - symfonyはAjax応答でPHP変数を取得します

javascript - tdレベルのときに、xsl htmlテーブル行からデータを抽出するにはどうすればよいですか?

javascript - Kendo Grid C#-データソースを再度更新せずに現在のページを選択

javascript - jQueryなしで欠落している画像を処理する

javascript - カルーセルslick.js +ブートストラップの列幅の問題

javascript - TypeError:nullのプロパティ 'insertBefore'を読み取れません

javascript - それ自体からHTML DOM要素としてスクリプトへの参照を取得します[重複]

javascript - JavaScriptでバックスラッシュをエスケープする方法

javascript - 絵文字の値を表示できません