csv のインポートに関する投稿をかなり読み、いくつかの例を見てきました。Insert Javascript プラグインを使用して、WP3.5.1 でグラフを表示しようとしています。
私は、Apple (AAPL) のデモで使用されているデータからグラフを作成し、highcharts Web サイトのデータ ダンプ (aapl-ohlcv.json) にあるデータを使用しようとしています。彼らのデモ ハイストック チャートは、ローソク足と出来高です。
私はjsonファイルを作成できないと思います（関連するphpを考えると私の能力を超えています）.csvのインポートはうまくいかないようです。だから私の質問は：
1どうすれば動作し、上記のように投稿に追加できるデータに基づいたcsvファイルをフォーマットできます<div id="data.csv" style="display: none">か?
2 このデータを解析するために必要なコードは何ですか?
私はもう試した -
$.get = function(id, fn) {
fn(document.getElementById(id).innerHTML);
};
$.get('data.csv', function(data) {
$(function() {
これはデータのないグラフを示していますが、これはおそらくデータが不適切にフォーマットされているためです。また、投稿自体にデータを含める必要があります (これは私の好みのオプションではありません)。
理想的には、csv ファイルを作成し (上記の Apple データに基づいていますが、別の株式/製品用であるため、同じ形式で同じ種類のチャートを取得します)、これを投稿にインポートします。そのようなファイルを作成して参照しようとしましたが、私が言ったように、これは機能しません。
どんなアイデアでも大歓迎です。指定されたデータを参照してください - ありがとうございます。
編集の一部としてこれを追加しました:
わかりました、これを言い換えさせてください。なぜなら、他のチャートで作業してきたので、解決策が見つからないことがわかるからです。ローソク足とボリューム チャートを構成するチャート データを取得し、JavaScript にストレート データ配列として追加したいと考えています。これを行う方法を教えてもらえますか?
元のデータ ファイルの形式は次のとおりです (わずか 1 か月)。
/* AAPL historical OHLC data from the Google Finance API */
[
/* Mar 2006 */
[1142553600000,64.75,65.54,64.11,64.66,29048435],
[1142812800000,65.22,65.46,63.87,63.99,21627764],
[1142899200000,64.29,64.34,61.39,61.81,48048714],
[1142985600000,62.16,63.25,61.27,61.67,48087166],
[1143072000000,61.82,61.90,59.61,60.16,51054888],
[1143158400000,60.25,60.94,59.03,59.96,38293616],
[1143417600000,60.35,61.38,59.40,59.51,39601685],
[1143504000000,59.63,60.14,58.25,58.71,48944176],
[1143590400000,59.13,62.52,57.67,62.33,83839008],
[1143676800000,62.82,63.30,61.53,62.75,49678962],
[1143763200000,63.25,63.61,62.24,62.72,29113658],
元のjsは次のとおりです。
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl- ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
これを（少量のデータのみを使用して）次のように変更しました。
`$(function() {
// $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: [[1142553600000,64.75,65.54,64.11,64.66,29048435],
[1142812800000,65.22,65.46,63.87,63.99,21627764],
[1142899200000,64.29,64.34,61.39,61.81,48048714],
[1142985600000,62.16,63.25,61.27,61.67,48087166],
[1143072000000,61.82,61.90,59.61,60.16,51054888],
[1143158400000,60.25,60.94,59.03,59.96,38293616],
[1143417600000,60.35,61.38,59.40,59.51,39601685],
[1143504000000,59.63,60.14,58.25,58.71,48944176],
[1143590400000,59.13,62.52,57.67,62.33,83839008],
[1143676800000,62.82,63.30,61.53,62.75,49678962],
[1143763200000,63.25,63.61,62.24,62.72,29113658]]
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [[1142553600000,64.75,65.54,64.11,64.66,29048435],
[1142812800000,65.22,65.46,63.87,63.99,21627764],
[1142899200000,64.29,64.34,61.39,61.81,48048714],
[1142985600000,62.16,63.25,61.27,61.67,48087166],
[1143072000000,61.82,61.90,59.61,60.16,51054888],
[1143158400000,60.25,60.94,59.03,59.96,38293616],
[1143417600000,60.35,61.38,59.40,59.51,39601685],
[1143504000000,59.63,60.14,58.25,58.71,48944176],
[1143590400000,59.13,62.52,57.67,62.33,83839008],
[1143676800000,62.82,63.30,61.53,62.75,49678962],
[1143763200000,63.25,63.61,62.24,62.72,29113658]]
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
ただし、これは「フィドル」では実行されません。どこで間違ったのですか？どうもありがとう。