Google 的图表 API 支持烛台图表,能够更改 X 轴上的值 - 即它们在这里是工作日,但可能是其他东西。
但是,据我所知,此图表 API 不允许您更改“灯芯”的线宽,并且不可能反转轴以使 0 在顶部(除非您切换到使用所有负值)。
Highcharts 具有更全功能的烛台图表和反转 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
}
]
});
});