3

HighCharts の HighStock バージョンを使用して、チャート内の一連のデータを作成しています。棒グラフの上、ヒストグラムの上にろうそく足グラフがあります。ローソク足ポイントはクリック可能です。彼らがクリックしたローソク足チャートのポイントにフラグを追加したいと思います。

これが私が試してみたコードの一部です：

// create the chart
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                alignTicks: false
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'DJIA Historical'
            },

            yAxis: [{
                title: {
                    text: 'OHLC'
                },
                height: 300,
                lineWidth: 2
            }, {
                title: {
                    text: 'Volume'
                },
                top: 400,
                height: 100,
                offset: 0,
                lineWidth: 2
            }, {
                title: {
                    text: 'MACD'
                },
                top: 520,
                height: 100,
                offset: 0,
                lineWidth: 1
            }],

            series: [{
                type: 'candlestick',
                name: 'DJIA',
                data: ohlc,
                events: {
                    click: function(event) {

                        console.log(chart);
                        chart.series[6].setData(event.point);
                    }
                },
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Histogram',
                pointPadding: 0,
                groupPadding: 0,
                data: histogram,
                yAxis: 2,
                color: '#666666'
            }, {
                type: 'line',
                name: 'MACD',
                pointPadding: 0,
                groupPadding: 0,
                data: macd,
                yAxis: 2,
                color: '#0000FF'
            }, {
                type: 'line',
                name: 'Signal',
                pointPadding: 0,
                groupPadding: 0,
                data: signal,
                yAxis: 2,
                color: '#000000'
            }, {
                type: 'flags',
                name: 'Active Point',
                data: [],
                onSeries: ohlc,
                shape: 'squarepin'
            }]
        });
    })

グラフは JavaScript エラーをスローしませんが、フラグを作成していません。少なくとも、それはそれを示していません。基本的に、クリックしたローソク足の上にフラグを描画させたいと考えています。彼らが別の場所をクリックした場合は、古いフラグを削除して、新しいポイントに新しいフラグを描画したいと考えています。シリーズのデータ​​を追加および削除することでこれを行うのが最善だと考えましたが、うまくいきませんでした。

これに関する助けがあれば大歓迎です！

4

1 に答える 1

6

まず、js-fiddle の例は、問題を理解するために非常に高く評価されます。あなたの問題について私が理解している最高のものから、これを試してください（5がフラグシリーズのインデックスであると仮定すると、コードはインデックス6を使用しているようです?!）

click: function(event) {
                this.chart.series[5].addPoint({
                    x: event.point.x,
                    title: 'hey you clicked me'
                });
            }

私のいじられたコード@ http://jsfiddle.net/U2Z2x/1/

setData を正しく使用していたので、1 つのフラグのみを表示することに関心があるように見えるので、それが最善の策のようです。setData は配列を期待し、単一の値を渡します。また、ポイントの形式も必要です旗型シリーズ用に少し作り直します

 click: function(event) {
                this.chart.series[5].setData([{
                    x: event.point.x,
                    title: 'hey you clicked me'
                }]);

フィドル更新 @ http://jsfiddle.net/U2Z2x/2/

于 2012-08-02T20:07:40.330 に答える