我已经阅读了很多关于导入csv的帖子,我看了一些例子。我试图使用Insert Javascript插件在WP3.5.1中显示图表。
我正在尝试使用从Apple(AAPL)演示中使用的数据创建图表的数据,这些数据可以在highcharts网站的数据转储(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中。你能告诉我怎么做吗?
原始数据文件具有此格式(仅一个月):
/* 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
}
}]
});
});
});
然而,这并不是在“小提琴”中运行。我哪里出错了?非常感谢。
答案 0 :(得分:0)
我看到你有JSON数字,但CSV看起来像:
1142812800000,65.22,65.46,63.87,63.99,21627764,
1142812800000,65.22,65.46,63.87,63.99,21627764,
1142812800000,65.22,65.46,63.87,63.99,21627764,
1142812800000,65.22,65.46,63.87,63.99,21627764,
1142812800000,65.22,65.46,63.87,63.99,21627764
然后解析http://docs.highcharts.com/#preprocesssing-data-from-a-file $ 1
答案 1 :(得分:-2)
您可以使用WordPress插件目录中提供的free IPU-Chart WP plugin。根本没有编程(或者至少没有编程)。
该插件需要一个csv并呈现 bar , pie , donut , line 或 scatter图表中的数据。您可以通过url引用csv或使用短代码直接在页面/文章中包含csv-data。