1

ハイチャートを使用して、数日間 (1 日から 7 日まで) のデータをプロットしたいと思います。

データは 1 時間ごとまたは 30 分ごとです。

表示を現地時間にしたいです (つまり、夏時間を観察します)。

グラフが連続的であることを望みます。つまり、春の時刻変更では、線に「ギャップ」がなく、冬の時刻変更日では、時刻変更日では倍増 (ジグザグ) しません。

a) ハイチャートはこれを処理できますか?

b) そうでない場合は、代わりに標準時間 (時間の変更なし) でプロットし、x 軸に現地時間のラベルを付けることができますか。もしそうなら：

b.1) データが数日にまたがる場合に、現地時間ラベルが (標準時間値ではなく) 00:00 の場合にのみラベルを表示するように指定できますか? ?

助けてくれてありがとう。jsfiddle の例が既にあること、または解決策を探しているときに見逃したものがあることを願っています。

[私のソリューションで更新]

使用する xAxis カテゴリと tickPositions を指定して、これを解決しました。これにより、夏時間の変更日が正しくプロットされます (チャートの xAxis の目盛り/グリッド線を含む)。次のようなオブジェクト (C# で定義され、json を介して javascript に戻されます) があります。

public class DataTableList
{
    public int numDays = 0;
    public List<string> heading = null;
    public List<List<string>> table = null;
};

プロットする日数を調べ、1日または2日であれば時間をプロットし、そうでなければ日付をプロットする関数。また、xAxisCategories を使用して、目盛り (つまり、グリッド線) をプロットする場所をチャートに伝えます。

function RefreshChartData() {    
    if (_data == null)
        return;

    var datePos, timePos, load_fcstPos;

    //we will 'line up' chartTickPositions and xAxisCategories so there's a tick for each label
    var chartTickPositions = Array();   //values on the x axis to display labels (x axis just goes 0,1,2,3,...,n)
    var xAxisCategories = new Array();  //labels to display on the xAxis

    //find column positions for data we're interested in plotting
    for (var col = 0; col < _data.heading.length; col++)
    {
        if (_data.heading[col].toLowerCase() == 'date')
            datePos = col;
        if (_data.heading[col].toLowerCase() == 'time')
            timePos = col;
        if (_data.heading[col].toLowerCase() == 'load_fcst')
            load_fcstPos = col;
    }

    var seriesStr = [];  //y values to plot

    //iterate through table rows, extracting data to plot, sorting out chart tick labels, etc
    for (var row = 0; row < _data.table.length; row++) {
        //get number of days we're plotting
        var numDays = parseInt(_data.numDays);

        //extract values to plot from row
        var date = _data.table[row][datePos];
        var time = _data.table[row][timePos];
        var iTime = parseInt(time);
        var value = _data.table[row][load_fcstPos];

        //create xAxis Label
        switch (numDays) {
            case (1):
            case (2):
                if (iTime % 200 == 0) {
                    chartTickPositions.push(row);  //want to plot this label every two hours
                    xAxisCategories.push(time);
                }
                else
                    xAxisCategories.push('');
                break;
            case (3):
            case (4):
            case (5):
            case (6):
            case (7):
            default:
                //just return date
                if (iTime == 0) {
                    chartTickPositions.push(row);  //want to plot this label midnight every day
                    xAxisCategories.push(date);
                }
                else
                    xAxisCategories.push('');
        }

        //add value to series to plot
        seriesStr.push(parseInt(value, 10));
    }

    var chart = new Highcharts.Chart({   //buid up our chart javascript to be triggered on client browser

        chart: {
            renderTo: 'chartContainer',
            animation: false,
            zoomType: 'x'
        },

        //http://api.highcharts.com/highcharts#xAxis
        xAxis: {
            categories: xAxisCategories,
            tickPositions: chartTickPositions,
            gridLineWidth: '1',
            lineWidth: 1,
            labels: {
                rotation: -90,
                align: 'right'
                //},
                //formatter: function () {
                //    return chartFormatter(this.value);
                //}                
            }
        },

        //http://api.highcharts.com/highcharts#plotOptions.series
        series: [{
            data: seriesStr,
            draggableY: false,
            color: 'green'
        }]
    });
}
4

1 に答える 1

1

グラフをサーバーのローカル時間で表示するか、クライアントのローカル時間で表示するかを指定していません。

概念的には、データを UTC 時間で保存し、サーバー上で Highcharts に渡す前に、またはクライアント側でローカル タイム ゾーン オフセットを適用します。

クライアント側では、次のようなものを使用します。

var myStartDateTimeInUTC = <assumed to be initialized in milliseconds>;
var d = new Date();
var timeZoneOffset = d.getTimezoneOffset() * 3600;

getTimezoneOffset() はオフセットを分単位で返すため、ミリ秒に変換するには 3600 を掛ける必要があります。

series: [{
   data: [ your data here ],
   pointStart: myStartDateTimeInUTC - timeZoneOffset
}]

このサーバー側をどのように行うかは、使用しているテクノロジーによって異なりますが、原則は同じです。

これにより、常に連続したグラフが生成されます。

于 2013-02-25T00:52:57.437 に答える