gpt4 book ai didi

javascript - 我可以使用什么工具来创建带有倒轴的 HTML5 烛台图表?

转载 作者:太空狗 更新时间:2023-10-29 14:16:40 26 4
gpt4 key购买 nike

<分区>

Google 的图表 API 支持 candlestick chart能够更改 X 轴上的值 - 即这里是工作日,但也可以是其他值。

但是,据我所知,此图表 API 不允许您更改“灯芯”的线宽,并且不可能反转轴以使 0 位于顶部(除非您切换到使用所有负值)。

Highcharts 有更多 full featured candlestick chart以及反转 y 轴的能力,但据我所知,必须使用时间戳作为 x 轴的值。

我可以使用什么工具来创建具有倒置 Y 轴的 HTML5 烛台图表,并能够在 X 轴上设置自定义标签,并且可能还有调整“灯芯”厚度的选项?

Google 图表示例

Highcharts 示例

Picture 1.png

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
}
]
});







});

Picture.png

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com