【问题标题】:using data or csv to create charts in Highstock使用数据或 csv 在 Highstock 中创建图表
【发布时间】:2013-03-14 19:55:04
【问题描述】:

我已经阅读了很多关于导入 csv 的帖子,并查看了一些示例。我正在尝试使用 Insert Javascript 插件在 WP3.5.1 中显示图表。

我正在尝试使用根据 Apple (AAPL) 演示中使用的数据创建图表的数据,这些数据可以在 highcharts 网站的数据转储 (aapl-ohlcv.json) 中找到。他们的演示 highstock 图表是他们的烛台和交易量。

我不认为我可以创建一个 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
                  }

}]

          });
     });
});

但是,这不会在“小提琴”中运行。我哪里做错了?非常感谢。

【问题讨论】:

  • 您是否尝试将 Highstock 置于调试模式以查看数据错误是什么?
  • 请看我上面的大重新编辑以澄清。

标签: wordpress csv highstock


【解决方案1】:

我看到你有 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

【讨论】:

    【解决方案2】:

    您可以使用 WordPress 插件目录中的 free IPU-Chart WP plugin。根本没有编程(或至少没有多少)。

    插件采用 csv 并呈现 barpiedonutlinescatter图表 的数据。您可以通过 url 引用 csv 或使用简码将 csv 数据直接包含在您的页面/文章中。

    some usage examples

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-05
      相关资源
      最近更新 更多