1

列タイプのグラフをプロットするためにハイチャートを使用しています。x 軸のデータは、タイムスタンプ ベースのデータではありません。通常のカテゴリのみです。以下のフィドルのように。

JSFIDDLE : http://jsfiddle.net/BalajiR/d1LL2tvk/4/

ユーザーがグラフ全体をパンして完全なグラフを表示できるように、パンを有効にしました。フィドルのようにブラウザで正常に動作しています。ただし、同じことはタッチ デバイスでは機能せず、パン用にズームされたチャートが必要です。

ズーム機能は必要ありません。デバイスのブラウザと同じ動作 (パンニング)。

同じことを実装する方法を共有してください。

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#F0F0F0',
                panning:true
            },

            title: {
                text: null
            },
            xAxis: {
                categories: ['PLAN_1','PLAN_2','PLAN_3','PLAN_4','PLAN_5','PLAN_6','PLAN_7','PLAN_8','PLAN_9','PLAN_10'],
                min:0,
                max: 3
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y;
                }
            },
            plotOptions: {

                column: {
                    grouping: false,
                    pointWidth: 30
                }
            },
            series: [{
                name: 'Total',
                data: [8, 10, 5, 9, 6, 8, 10, 5, 9, 6],
                color: '#97BF0D'
            }, {
                name: 'Actionable',
                data: [4, 5, 2, 4, 3, 4, 5, 2, 4, 3],
                color: '#FFFFFF'
            }]
        });
    });

よろしく、バラジR

4

1 に答える 1

0

私はまだそれを自分で実装していません。これを行うためのよりクリーンな方法があるかもしれませんが、ここに潜在的な解決策があります:

イベント onDrag のデフォルト アクションであるため、ブラウザでパンできます。このイベントは、ユーザーが画面をクリックしてドラッグすると発生します。モバイル プラットフォームにはドラッグ機能がないため、代わりに onZoom を使用しています。

私がすることは、onZoom イベントで希望するようにイベントを手動でパンするように設定することです。onDrag のデフォルトの動作が見つかった場合は、次のことができます。

onZoom(e){// same behavior as onDrag};

これらはすべてキーで定義されeventsます。

于 2014-08-31T16:41:25.517 に答える