0

私はチャートを持っており、Highchart Stocks のようなタイム ナビゲーターが必要なので、いくつかの手作りのオプションで Stock を使用しましたが、非常にうまく表示されます。株式では、値の代わりに変動をプロットするオプションがあります。このデータシリーズの例：

[1,2,3,4,5] バリエーションは [+1,+1,+1,+1] です。{point.change} とセリエ プロットオプション {compare:'value'} を使用して、ツールチップでこの情報にアクセスできます。

ただし、そうすると、これらのバリエーションに合わせて YAxis が変更されます。ツールチップにバリエーションを表示したいだけで、チャートを変更したくありません。何か案が？

これは正しい YAxis を使用した正しいチャートですが、ツールチップにはバリエーションが表示されないことがわかります: http://jsfiddle.net/techunter/PhW3t/

これ {compare: 'percent'} を使用したものは、ツールチップの正しいバリエーションを示していますが、YAxis スケールが間違っています: http://jsfiddle.net/techunter/PhW3t/49/

4

2 に答える 2

0

どうやらそれを機能させるのは本当に難しいので、ツールチップフォーマッタを次のように作成しました:

tooltip: {
                formatter:function(a,b,c){
                    var s = '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b>';
                    $.each(this.points, function(i, point) {
                        var prev = jQuery.inArray(point.x, point.series.processedXData)-1;
                        if(prev>=0){
                            prev = point.series.points[prev];
                            var percent = (point.y - prev.y) *100 / point.y;
                            var positive = false;
                            if(percent>0){
                                positive = true;
                                percent='+'+percent;
                            }
                            else
                                percent = percent +'';
                            percent = percent.substring(0,percent.indexOf('.')+3)+'%';
                            if(positive)
                                percent = '<span style="color:#000000">'+percent+'</span>';
                            else
                                percent = '<span style="color:#FF0000">'+percent+'</span>';
                            s += '<br/>'+'<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b> ('+percent+')';
                        }
                        else{
                            s += '<br/>'+'<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b>';
                        }
                    });

                    return s;
                },
                enable:true
            },

実際: http://jsfiddle.net/techunter/PhW3t/55/

誰かがより良い/より速いアイデアを持っている場合は、共有してください.

于 2012-06-21T13:51:41.557 に答える
-1

コードを見ると、yAxisの最小/最大をそれぞれ2/5に設定しています。これは非変動チャートと同じです。これらの値を試してください（すべてのポイントを確認できます）。

yAxis: {
            min: -10,
            max:25,
            title: {
                text: '# of Hospitalizations'
            }
        }

必要に応じて、計算値で最小/最大を設定することもできます。

編集：事前計算を実行し、そのデータをメモフィールドとしてシリーズオブジェクトに配置することを説明するこのリンク を見つけました。SQL呼び出しからデータを返す場合、これは簡単なはずです。SQLを簡単に変更して、パーセンテージの変化を伴う新しい列を返します。次に、メモフィールドへの呼び出しから変化率を呼び出します。

于 2012-06-21T12:29:29.833 に答える