2

デフォルトで月単位のビューを表示する 6 か月のグラフが必要ですが、その日までズームできます。

今日の6か月のグラフは次のとおりです。

xAxis: {
title: {
text: 'Temperature'
},
categories: ['Oct','Nov','Dec','Jan','Feb','Mar',]
series: [
{ name: 'my series',
visible: true,
data: [5,10,15,5,7,8,]},
{ name: 'another series',
visible: true,
data: [0,0,0,146,80,0,]},

これは月間でうまく機能します。

毎日のデータを取得するには、約 30*6 要素をデータにプッシュします。また、私は使用してみました:

pointStart: Date.UTC(2010, 11, 1),
pointInterval: 30 * 24 * 3600 * 1000 // one day

この例のように: http://jsfiddle.net/7Mmee/9/

しかし問題は、毎月が 30 日というわけではなく、グラフの下部にもカテゴリが表示されないことです。

私が見逃しているこれを行う簡単な方法があると確信しています。

ありがとうジョエル

4

2 に答える 2

8

月に 1 つのデータ ポイントを表示しようとしているように見えます。この場合、各データ ポイントに時間を割り当て、日付フォーマッタを変更することをお勧めします。

//Example 1: Each data point has a time, with a date formatter:
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { //custom date formats for different scales
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%e. %b',
            week: '%e. %b',
            month: '%b', //month formatted as month only
            year: '%Y'
        }
    },

    series: [{
        data: [
            {x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each month
            {x: Date.UTC(2010, 1, 1), y: 4},
            {x: Date.UTC(2010, 2, 1), y: 9},
            {x: Date.UTC(2010, 3, 1), y: 16},
            {x: Date.UTC(2010, 4, 1), y: 25},
            {x: Date.UTC(2010, 5, 1), y: 36}
        ]
    }]
});

ただし、「日」レベルまでズームダウンしたいようです。zoomTypeこの場合、すべてのデータ ポイントをシリーズに追加し、おそらく日付フォーマッタと組み合わせてハイチャートのプロパティを使用するのが理にかなっています。

//Example 2: Each data point represents a day, and we use the 'zoomType' feature:
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime',
        zoomType: 'x'
    },

    series: [{
        data: [
            {x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each day
            {x: Date.UTC(2010, 0, 2), y: 1.1},
            {x: Date.UTC(2010, 0, 3), y: 1.4},
            {x: Date.UTC(2010, 0, 4), y: 1.8},
            {x: Date.UTC(2010, 0, 5), y: 2.5},
            {x: Date.UTC(2010, 0, 6), y: 3.8}
        ]
    }]
});
于 2011-03-29T13:09:06.160 に答える
2

私はこれがうまくいくと思います：

データをタイムスタンプと値のペアとして渡すことができます。この例を確認してください: http://jsfiddle.net/CAKQH/310/

于 2011-03-28T13:57:48.973 に答える