【发布时间】：2012-05-11 22:25:30
【问题描述】：
Google 的图表 API 支持 candlestick chart 能够更改 X 轴上的值 - 即它们在这里是工作日，但可能是其他值。
但是，据我所知，此图表 API 不允许您更改“灯芯”的线宽，并且不可能反转轴以使 0 在顶部（除非您切换到使用所有负值）。
Highcharts 有更多 full featured candlestick chart 和反转 y 轴的能力，但据我所知，必须使用时间戳作为 x 轴的值。
我可以使用什么工具来创建一个带有倒置 Y 轴的 HTML5 烛台图表，并且能够在 X 轴上设置自定义标签，并且可以选择调整“灯芯”厚度？
谷歌图表示例
Highcharts 示例
jqChart 示例
（这很混乱 - 来源这里http://jsfiddle.net/FSEQP/）
<html>
<head>
</head>
<body>
<div id="jqChart" style="width: 800px; height: 550px;" />
</body>
</html>
function round(d) {
return Math.round(100 * d) / 100;
}
var data = [];
var date = new Date(2010, 0, 1);
var high = Math.random() * 40;
var close = high - Math.random();
var low = close - Math.random();
var open = (high - low) * Math.random() + low;
data.push([date, round(high), round(low), round(open), round(close)]);
for (var day = 2; day <= 12; day++) {
date = new Date(2010, 0, day);
high = open + Math.random();
close = high - Math.random();
low = close - Math.random();
var oldOpen = open;
open = (high - low) * Math.random() + low;
if (low > oldOpen) {
low = oldOpen;
}
data.push([date, round(high), round(low), round(open), round(close)]);
}
$(document).ready(function () {
$('#jqChart').jqChart({
title: { text: 'Candlestick Chart' },
legend: { visible: false },
// labelsOptions : { visible: false },
axes: [
{
type: 'linear',
location: 'left',
reversed: true
},
{
type: 'category',
location: 'bottom',
categories: [
'Category 1', 'Category 2', 'Category 3',
'Category 4', 'Category 5', 'Category 6',
'Category 7', 'Category 8', 'Category 9',
'Category 10', 'Category 11', 'Category 12'
],
labels: {
font: '12px sans-serif',
angle: -90,
}
}
],
series: [
{
type: 'column',
data: data
}
]
});
});
【问题讨论】：
标签： javascript html charts data-visualization visualization