1

設計者は、最初/最後の目盛りで開始/停止するのではなく、プロット ラインが使用可能なチャート幅の 100% を消費するように積み上げ面グラフをレンダリングするように要求しました。これは、私たちが達成しようとしていることを示す、デザイナーによって提供されたモックアップです。

http://oi50.tinypic.com/25s2bzm.jpg

現在、グラフは次のように表示されますが、プロット ラインがグラフの幅を消費しないことに注意してください。

http://jsfiddle.net/8pmVK/

$(function () {
var chart;
$(document).ready(function() {
    Highcharts.setOptions({
        colors: ['#1FA5FF', '#9BD237', '#E6673B']
    });
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area'
        },
        title: {
            text: null
        },
        exporting: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Mar 2012', 'Apr 2012', 'May 2012', 'Jun 2012', 'Jul 2012', 'Aug 2012', 'Sep 2012'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null
            }
        },
        plotOptions: {
            area: {
                fillOpacity: 0.3,
                stacking: 'normal',
                lineWidth: 3,
                marker: {
                    lineWidth: 3,
                    enabled: false
                }
            }
        },
        series: [{
            name: 'John',
            data: [30, 26, 18, 35, 30, 28, 40, 31]
        }, {
            name: 'Jane',
            data: [40, 35, 37, 33, 30, 42, 30, 26]
        }, {
            name: 'Bob',
            data: [26, 33, 28, 20, 35, 33, 35, 20]
        }]
    });
});

私はAPIを調べて周りを検索しましたが、それが可能であると仮定して、これを達成するために設定する必要があるオプションを見つけられませんでした（または見逃した可能性があります）. 助けてくれてありがとう。

更新:解決策は xAxis の最小プロパティと最大プロパティを設定することなので、これを反映するように上記を更新しました。ただし、これは最初と最後のデータ ポイントを除外するため、チャート データを切り捨てます。そのため、カテゴリと series.data 配列にダミーの値を追加して、データが Ajax 経由で返されるオブジェクトであることに注意して回避します。チャートを作成します。

data.categories.unshift('');
data.categories.push('');
for (var i = 0, len = data.series.length; i < len; i++) {
    data.series[i].data.unshift(0);
    data.series[i].data.push(0);
}

xAxis の最小/最大は、次のように設定されます。

xAxis: {
    min: 1,
    max: data.categories.length - 2 // 2nd to last index
}
4

3 に答える 3

1

xAxis の適切な最小値/最大値を見つける必要があります。あなたの例では：

xAxys: {
 ...
 min: 1,
 max: 5
}
于 2013-03-22T15:37:32.487 に答える
0

I am sure the above project has been completed but one can also use Highstocks in place of Highcharts (same license) and add a scroll bar as here: [http://jsfiddle.net/8pmVK/]. 

        scrollbar: {
            enabled: true
        },

Also, Highstock includes all the functionality of Highcharts .

于 2015-05-26T21:23:38.893 に答える
0

最小値と最大値に小数を使用できます。

あなたの場合、最小 0.5 と最大 6.5 がうまくいくようです: http://jsfiddle.net/jlbriggs/8pmVK/2/

min:0.5,
max:6.5,

整数を使用すると、常にスペースが残るか切り捨てられます。これは、getExtremes() を呼び出し、それに応じて最小値と最大値を調整し、setExtremes() を呼び出すことで、必要に応じて動的に実行できます。

于 2013-03-25T20:30:17.857 に答える