2

不使用 CSV 数据的工作图

使用这个例子：

http://jsfiddle.net/grw3hamv/

我编写了以下代码来绘制一个简单的 ohlc 图：

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.stockChart('chart-container', {
    chart: {
        type: 'ohlc'
    },
    title: {
        text: 'OHLC Chart W/O CSV'
    }, 
    series:  [{
        data: [{ 
            //date: 2016-08-01,
            x: new Date('2015-08-01').getTime(),
            open: 22, 
            high: 40,
            low: 20,
            close: 35,
            }, { 
            // date: 2016-08-02,
            x: new Date('2015-08-02').getTime(),
            open: 32, 
            high: 50,
            low: 30,
            close: 45
          }]
    }]
});
</script>

对 open 和 close 字段中的“null”值进行试验表明，应用程序允许 open 为 null 值，但如果 close 字段为 null 值，则不会打印条形图。

在 PRE 块中使用 CSV 的示例

此示例代码使用嵌入的 csv 数据通过 highcharts 生成“areaspline”图表：

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/data/csv/

无法在 PRE 块中从 CSV 绘制 OHLC 图表 - （已解决！）

我正在尝试将 csv 数据嵌入 html 并从 csv 数据生成“ohlc”样式图表。下面的 html/script 代码在 Firefox 中本地运行。结果显示图表布局，但图中未出现数据条。（编辑：由于评论部分提供了解决方案，下面的代码现在可以工作）。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display: none">
x,open,high,low,close
1524787200000,179,180.48,178.16,178.50
1525046400000,179,180.615,178.05,178.80
</pre>
<script>
Highcharts.stockChart('chart-container', {
    chart: {
        type: 'ohlc'
    },
    title: {
        text: 'OHLC Chart from CSV?'
    }, 
    data: {
           csv: document.getElementById('csv').innerHTML 
    }
});
</script>

接下来的工作是将 CSV 数据中的日期格式转换为示例命令输出的时间戳格式：new Date('2015-08-02').getTime()。

4

0 回答 0