7

Google 的图表 API 支持烛台图表,能够更改 X 轴上的值 - 即它们在这里是工作日,但可能是其他东西。

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

Highcharts 具有更全功能的烛台图表和反转 y 轴的能力,但据我所知,必须使用时间戳作为 x 轴的值。

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

谷歌图表示例

Highcharts 示例

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







        });

图片.png

4

4 回答 4

10

正如@PirateApp 和@ivanxuu 在评论中指出的那样,techan.js不再维护,现在有https://d3fc.io/

此外,目前(2020 年 5 月)还有一些活跃的项目:


原答案:

techan.js根据 D3js 的作者推荐。它是免费的、开源的和交互式的。

https://github.com/andredumas/techan.js

http://techanjs.org/

于 2015-06-07T21:23:49.863 回答
1

我相信jqChart符合您的要求。

于 2012-05-02T15:50:03.473 回答
0

试试 amCharts.com - 他们的系列图表可以接受 categoryAxis 的字符串,valueAxes 可以反转,线条粗细也可以调整。这是烛台图表的示例:http: //amcharts.com/javascript/candlestick-chart/

于 2012-05-02T13:42:56.373 回答
-4

我建议 SVG 创建这样的图表。

于 2012-05-02T13:01:44.123 回答