4

問題に直面していますが、それが highcharts プラグインのバグなのかプログラミング エラーなのかわかりません。

null 値を使用して、セリエが 1 つしかない切断された折れ線グラフを描画していますが、ホバー マーカーに問題があるようです。コードは単純ですが、何が原因なのかわかりません。

問題を再現する例を次に示します: http://jsfiddle.net/KYXQS/9/ (26/02 更新)

そしてここにコード(26/02更新):

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25,
            zoomType: 'xy'
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +'°C';
            }
        },
        plotOptions :
        {
            line : {
                marker :
                {
                    enabled: false,
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Red',
            data: [[0,0],[1,1],[2,2]
                   ,null
                   ,[4,4],[5,5],[6,6]

                   ,null
                   ,[2,0],[3,1],[4,2]
                   ,null
                   ,[6,4],[7,5],[8,6]

                   ,null
                   ,[12,0],[13,1],[14,2]
                   ,null
                   ,[16,4],[17,5],[18,6]

                   ,null
                   ,[22,0],[23,1],[24,2]
                   ,null
                   ,[26,4],[27,5],[28,6]

                   ,null
                   ,[32,0],[33,1],[34,2]
                   ,null
                   ,[36,4],[37,5],[38,6]

                   ,null
                   ,[34,0],[35,1],[36,2]
                   ,null
                   ,[38,4],[39,5],[40,6]

                   ,null
                   ,[36,0],[37,1],[38,2]
                   ,null
                   ,[40,4],[41,5],[42,6]

                   ,null
                   ,[40,2],[41,2],[42,3]
                   ,null
                   ,[47,8],[48,10],[49,11]
                  ],
            color: 'red'
        }
        ,{
            name: 'Blue',
            data: [[2,2],[3,3],[4,4]
                   ,null
                   ,[8,8],[9,10],[10,12]

                   ,null
                   ,[4,2],[5,3],[6,4]
                   ,null
                   ,[10,8],[11,10],[12,12]

                   ,null
                   ,[14,2],[15,3],[16,4]
                   ,null
                   ,[20,8],[21,10],[22,12]

                   ,null
                   ,[24,2],[25,3],[26,4]
                   ,null
                   ,[30,8],[31,10],[32,12]

                   ,null
                   ,[34,2],[35,3],[36,4]
                   ,null
                   ,[40,8],[41,10],[42,12]

                   ,null
                   ,[36,2],[37,3],[38,4]
                   ,null
                   ,[42,8],[43,10],[44,12]

                   ,null
                   ,[38,2],[39,3],[40,4]
                   ,null
                   ,[44,8],[45,10],[46,12]

                   ,null
                   ,[42,3],[41,3],[42,4]
                   ,null
                   ,[49,11],[52,12],[53,12]
                  ],
            color: 'blue'
        }
        ,{
            name: 'Green',
            data: [[6,6],[7,7],[8,8]
                   ,null
                   ,[10,12],[11,15],[12,19]

                   ,null
                   ,[8,6],[9,7],[10,8]
                   ,null
                   ,[12,12],[13,15],[14,19]

                   ,null
                   ,[8,6],[9,7],[10,8]
                   ,null
                   ,[12,12],[13,15],[14,19]

                   ,null
                   ,[18,6],[19,7],[20,8]
                   ,null
                   ,[22,12],[23,15],[24,19]

                   ,null
                   ,[28,6],[29,7],[30,8]
                   ,null
                   ,[32,12],[33,15],[34,19]

                   ,null
                   ,[38,6],[39,7],[40,8]
                   ,null
                   ,[42,12],[43,15],[44,19]

                   ,null
                   ,[40,6],[41,7],[42,8]
                   ,null
                   ,[44,12],[45,15],[46,19]

                   ,null
                   ,[42,6],[43,7],[44,8]
                   ,null
                   ,[46,12],[47,15],[48,19]

                   ,null
                   ,[42,4],[45,5],[47,8]
                   ,null
                   ,[53,12],[54,13],[55,14]
                  ],
            color: 'green'
        }]
    });
});

});

これらのマーカーを再表示する方法について何か考えはありますか?

前もって感謝します。

UPDATE 26/02 :
この問題の原因を特定するために他のシナリオをテストしてきましたが、ここに私が見つけたものがあり ます
:
、マーカーが表示されるはずの場所を完全にズームしても表示されません。
- y 値が同じかどうかに関係なく、問題が発生します。

UPDATE 25/04 : たとえば、緑色のシリーズの [47,15] にポイントをホバーしようとすると、バグが表示されます。[47,15] ポイントの代わりに [47,8] ポイントが「ホバー」され、何をしようとしても (正確にズームするなど)、[47,15] ポイントを「ホバー」することはできません。

問題を説明するために、jsfiddle リンクと上記のコードをより多くの例で更新しました。

誰でもこれを修正する考えがありますか?

4

3 に答える 3

1

問題は、ハイチャートでは、1 つのシリーズのデータ​​を xAxis の昇順で並べ替える必要がありますが、シリーズはそうではありません。あなたのデータをソートし、動作するはずです。

于 2013-04-26T12:20:49.347 に答える
0

バグはハイチャートにもプログラムにもありません。問題は、一部のマーカーが他のマーカーの後ろに隠れていることです。http://jsfiddle.net/msjaiswal/KYXQS/10/を見てください 。緑と青の線の接続点で、青いマーカーが緑のマーカーの後ろに隠れていることに気付くでしょう。凡例から緑のシリーズの選択を解除してみると、非表示の青いマーカーが表示されます。

次のようにチャート オプションでマーカーを有効にします。

           line : {
                marker :
                {
                    enabled: true,
                }
            }
于 2013-04-24T11:42:39.680 に答える
0

マーカーはに設定されているため、実際にはマーカーについて話しているわけではないと思います

plotOptions : { 行 : { マーカー : { 有効: false, } } },

あなたの例では。マーカーを表示したい場合は、これを enabled: true に変更する必要があります。

代わりに、おそらくツールチップについて話しているでしょう。

コードを次のように変更する必要があります。

tooltip: {
    shared: true,
    formatter: function () {
        var s = '<b>' + this.x + '</b>';

        $.each(this.points, function (i, point) {
            s += '<br/>' + point.series.name + ': ' + point.y + 'm';
        });

        return s;
    },
},

これらのドキュメント エントリとフィドルを参照してください。

http://api.highcharts.com/highcharts#tooltip.shared

http://api.highcharts.com/highcharts#tooltip.formatter

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/formatter-shared/

于 2013-02-25T17:42:37.427 に答える