javascript 我可以使用什么工具来创建带有倒轴的 HTML5 烛台图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10413867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What tool can I use to create an HTML5 candlestick chart with an inverted axis?
提问by cwd
Google's charting API supports a candlestick chartwith the ability to change the values on the X axis - i.e. they are week days here but could be other things.
Google 的图表 API 支持烛台图表，能够更改 X 轴上的值 - 即它们在这里是工作日，但可能是其他东西。
However, as far as I can tell, this charting API does not allow you to change the line width for the "wicks", and it is impossible to invert the axis so that 0 is on top (unless you switch to using all negative values).
但是，据我所知，此图表 API 不允许您更改“灯芯”的线宽，并且不可能反转轴使 0 位于顶部（除非您切换到使用所有负值）。
Highcharts has a more full featured candlestick chartand the ability to reverse the y axis, but as far as I can tell you MUST use timestamps as values for the x axis.
Highcharts 有一个功能更齐全的烛台图和反转 y 轴的能力，但据我所知，必须使用时间戳作为 x 轴的值。
What tool can I use to create an HTML5 candlestick chart with an inverted Y axis and the ability to set custom labels on the X axis, and possibly and option to adjust the "wick" thickness?
我可以使用什么工具来创建带有倒置 Y 轴的 HTML5 烛台图表，并且能够在 X 轴上设置自定义标签，并且可能还有调整“灯芯”厚度的选项？
Google Chart Example
谷歌图表示例
Highcharts Example
Highcharts 示例
jqChart Example
jqChart 示例
(this is pretty messed up - source here http://jsfiddle.net/FSEQP/)
（这很混乱 - 来源在这里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
}
]
});
});
回答by simonmysun
As pointed out in the comments by @PirateApp and @ivanxuu, techan.jsis no longer maintained and there is now https://d3fc.io/
正如@PirateApp 和@ivanxuu 在评论中指出的那样，techan.js不再维护，现在有https://d3fc.io/
Besides there are currently (May 2020) active projects:
此外，目前（2020 年 5 月）还有以下活动项目：
- https://plot.ly/javascript/candlestick-charts/using
plotly.jsbased ond3.js - https://echarts.apache.org/examples/en/#chart-type-candlestick
- http://dygraphs.com/
- https://plot.ly/javascript/candlestick-charts/使用
plotly.js基于d3.js - https://echarts.apache.org/examples/en/#chart-type-candlestick
- http://dygraphs.com/
Original answer:
原答案：
I recommend techan.jsbased on and by the author of D3js. It's free, open source and interactive.
我推荐techan.js基于并由 D3js 的作者。它是免费的、开源的和交互式的。
https://github.com/andredumas/techan.js
回答by zeroin
Try amCharts.com - their serial chart can accept strings for categoryAxis, valueAxes can be reversed and line thickness can also be adjusted. Here is example of candlestick chart: http://amcharts.com/javascript/candlestick-chart/
试试 amCharts.com - 他们的串行图表可以接受 categoryAxis 的字符串，valueAxes 可以反转，线的粗细也可以调整。这是烛台图表的示例：http: //amcharts.com/javascript/candlestick-chart/
回答by Jocelyn LECOMTE
I'd suggest SVG to create such diagrams.
我建议 SVG 来创建这样的图表。
