7

GoogleのチャートAPIは、X軸の値を変更する機能を備えたローソク足チャートをサポートしています。つまり、ここでは平日ですが、他の可能性もあります。

ただし、私が知る限り、このチャートAPIでは「芯」の線幅を変更できず、0が上になるように軸を反転することはできません(すべての負の値を使用するように切り替えない限り) )。

Highchartsには、よりフル機能のローソク足チャートとy軸を反転する機能がありますが、私が知る限り、x軸の値としてタイムスタンプを使用する必要があります。

Y軸が反転し、X軸にカスタムラベルを設定する機能と、場合によっては「芯」の厚さを調整するオプションを備えたHTML5ローソク足チャートを作成するためにどのツールを使用できますか?

Googleチャートの例

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







        });

Picture.png

4

4 に答える 4

10

@PirateApp と @ivanxuu のコメントで指摘されているように、techan.js現在は維持されておらず、 https ://d3fc.io/ があります。

現在(2020年5月)アクティブなプロジェクトがあります:


元の答え:

techan.jsD3js の作成者に基づいて作成することをお勧めします。無料、オープン ソース、インタラクティブです。

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 に答える