HighChartsは私のデータアレイを奇妙な方法で分割します
-
12-10-2019 - |
質問
私は使用しています ハイチャート (特定のデモへのリンク - [以下のコードを比較する]オプションの表示をクリックします)個人用のデータをレンダリングします。
注:これはほぼ間違いなくME関連のエラーなので、HighChartsが過失になっていることをほのめかしているわけではありません。それは本当に素晴らしいAPIです!
設定するとき series.data チャートオブジェクトのフィールドでは、奇妙な配列セクションに遭遇します。
たとえば、これは正常に機能します。
series: [{
name: 'seriesName',
data: [22, 24, 15]
}]
値22、24、および15で3つのデータポイントがプロットされています。
でも、
series: [{
name: 'sillySeries',
data: chartData[0]
}]
値2、4、5で3ポイントをレンダリングし、ポイントのタイトルはそれぞれ2、2、および1です。つまり、配列エントリをタイトルに分割し、次に2桁の数字の値を分割します。
Console.logは、Chartdataがどのように見えるかを示しています
22,24,15,2010-9,2010-10,2010-11
(3か月間の3つの値)
実際の配列は[22,24,15] [2010-9,2010-10,2010-11]に似ていますが
私の2Dアレイ chartData[][]
もっている [column][row]
データのインデックス、そして私はそれを求めていると考えました chartData[0]
配列を返します。
おそらく私の質問は次のとおりです。JavaScriptオブジェクトにプロパティ/値を設定するために、2D配列表現から1D配列を返すにはどうすればよいですか?私はおそらく非常に明白なものを見落としているようです。
編集:
data: [24]
24で1ポイントをプロットします。
data: '24'
データをタイトルとして分割してから値として分割し、24ではなく4でポイントを効果的にプロットします。
したがって、私が配列をに渡そうとすると、表現は文字列になります データ 分野。 string.toarrayのようにできる方法はありますか?
編集2:
chartData[col][row]
空の配列として宣言されています
var chartData = [];
その後、HTMLテーブルの行と列を反復することで値で満たされます。
chartData[cellIndex][rowIndex] = $(currentCell).text();
解決 2
parseint()はその日を保存しました。
何かのようなもの
for (i=0; i<chartData[0].length; ++i) {
columnOne.push(parseInt(chartData[0][i]);
}
オブジェクト表記にデータフィールドを使用してデータを表示するために使用できる配列を教えてくれました
data: columnOne
より文字通り
chart1.series [0] .data = columnone;
指摘してくれてありがとう
Chartdataはおそらく配列ですが、Chartdata [0]は文字列のように聞こえます。
私の配列内のデータは実際にはすべての文字列であるという私の発見につながります。これは、一部のフィールドが文字列であり、一部は日付(yyyy-mm-dd)であり、一部は単なるINTであるため、このように保持しています。
あなたの両方に感謝します=)
他のヒント
Chartdataはおそらく配列ですが、Chartdata [0]は文字列のように聞こえます。文字列に配列インデックスを使用すると、その位置で文字を取得します。これはまさにあなたが経験していることです...
値2、4、5で3ポイントをレンダリングし、ポイントのタイトルはそれぞれ2、2、および1です。つまり、配列エントリをタイトルに分割し、次に2桁の数字の値を分割します。
JavaScriptの配列内の配列を定義する方法はたくさんあります。これが1つです:
var chartData = [
[22,24,15]
,['2010-9','2010-10','2010-11']
];
まあ、これは本当の答えではありませんが、あなたを助けるかもしれません。
HighChartsを使用すると、特定のオプションを前処理できます。あなたの場合、あなたは次のようなことをすることができます:
options.series[0].data = new Array(1, 0, 4);
DOCリファレンス: http://www.highcharts.com/documentation/how-to-use#options
これが失敗した場合は、上にコメントしてください。