web-dev-qa-db-ja.com

欠損データに対してハイチャートをデフォルトで0にする方法

1分間隔で時系列があります。 0として欠落しているポイントを含むチャートに表示したいと思います。

XAxis.ordinalを見つけ、それをオフにすると、時系列が適切な間隔で表示されます。問題は、欠損データに対して0にならずにポイント間に直接線を引くことです。

javascripthighcharts
47
Wraithan

1つの方法は、データを前処理し、nullを0に置き換えることです。

var withNulls = [null, 12, 23, 45, 3.44, null, 0];
var noNulls = withNulls.map(function (item) {
    return (item === null) ? 0 : item;
});

Jsfiddleに保存された例： http://jsfiddle.net/7mhMP/

5
eolsson

HighChartsのAPIリファレンス を徹底的に検索しましたが、そのオプションは提供していません。彼らが提供するのは、nullデータが間にあるときにポイントの接続を無効にするオプションです（折れ線グラフと面グラフのみ）：

var chart = new Highcharts.Chart({
    plotOptions: {
        line: {
            connectNulls: false
        }
    }
});

これは、APIによるデフォルト設定です。そのため、データがnull値で接続されている理由がわかりません。たぶん彼らは最近デフォルトを変更したのでしょうか？

Example of HighChart with missing data

nullを0にデフォルト設定すると誤解を招くように思われるため、これはデータの適切な表現であると感じています。

5
Justus Romijn

失われたデータを0として入力する必要があります。highchartはxAxis間隔を認識しないためです。

1 分間隔で時系列がある場合、欠落しているすべての分データを0に設定する必要があります。 1 day間隔で時系列がある場合、欠落しているすべてのdayデータを0に設定する必要があります。

1
Aaronlong31

私は同じ問題を抱えており、データベース内のデータ構造をVARCHARとして設定し、データがない場合はデフォルト値をnullに設定して、データがNULLになるようにする必要があることを理解しています。その後、null値を受け入れ、highchartは表示されず、欠落している領域をnull値で接続しません。
さらに、データをNULLとして受信する必要があり、それらを_''_に変更しないでください。
この作業例を参照してください。

_var chart = new Highcharts.Chart({

    chart: {
        defaultSeriesType: 'spline', // use line or spline
        renderTo: 'container1'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [9, 4,null, 2, 1, 0, 6, 5, 4, 1, 6, 4]
    }]

});
_

ここ は、nullと_''_を使用した2つの異なるチャートのフィドルです

UPDATE：
parseINTを使用してデータをプッシュする場合は、parseINT(NULL)がNANを提供することを覚えておく必要があります。

_var val = parseInt(rows[i]);
if (isNaN(val))
{
  val = null;
  result.Push(val);
}
_
0
osyan