4

HighCharts を使用して数百点をプロットしています。各ポイントには不透明度の値があり、強調表示されると赤に変わります。ただし、いくつかのポイントを強調表示すると、ポイントが過剰にプロットされているため、それらを見るのが非常に難しくなります。

ここに画像の説明を入力

私が望むのは、次のように、選択したポイントがはっきりと見えるようにすることです。

ここに画像の説明を入力

次のコードを使用してチャート上のポイントを選択しています。

updateChart = function(x){

    for (i=0; i<chart.series[0].data.length; i++){

        if(chart.series[0].data[i].config[2] == x){       
            chart.series[0].data[i].graphic.attr({'fill':'red', 'z-index':1000})
        }
        else{
            chart.series[0].data[i].graphic.attr('fill', 'rgba(0,255,0,0.6)')
        }        
    }
}

ポイントの値を設定しようとしz-indexましたが、違いはないようです (私も試しました'z-index':'1000')。強調表示されたポイントが他のすべてのポイントの上に表示されるようにする別の方法はありますか?

4

4 に答える 4

7

2014年現在の更新

これは古い質問ですが、2014 年の時点でハイチャート用に更新すると思いました。Element.toFront()自動的にポップして一番上に再追加する組み込みメソッドを使用できるようになりました。

データ インデックスでポイントを移動する例は次のiようになります。

chart.series[0].data[i].graphic.toFront()

必要なのはそれだけです。

API ソース

于 2014-07-25T19:26:58.297 に答える
6

残念ながら、各ポイントには zIndex プロパティがありません。しかし、Bubbles が述べたように、いつでも最後にポイントを追加して、最後にレンダリングされて一番上に表示されるようにすることができます。

また、すべてのポイントをループして要素にスタイルを直接追加する代わりに、ハイチャートのstates:selectオプションを活用することをお勧めします。次に、選択した状態に特定のスタイルを設定できます。select()ハイライトしたいポイントでトリガーするだけです。

    marker: {
        states: {
            select: {
                fillColor: '#00ff00'
            }
        }
    }

ポイントを最後まで押して、ポイントをトリガーすることで、ポイントを強調表示する方法を次に示しますselect()。

function highlightPoint(point){
    //save the point state to a new point
    var newPoint = {
        x: point.x,
        y: point.y
    };
    //remove the point
    point.remove();
    //add the new point at end of series
    chart.series[0].addPoint(newPoint);
    //select the last point
    chart.series[0].points[chart.series[0].points.length - 1].select();
}

デモ @ jsFiddle

于 2012-11-10T07:59:53.947 に答える
3

ハイチャートは、z-index などによって直接制御されない svg 要素から作成されます。ただし、どの要素が何の上にレンダリングされるかを制御することはできます。SVGツリーの最後の要素が残りの上に描画されるため、要素を前面に移動するには、要素をポップアウトして、その要素を含む SVG 要素に追加します。チャート。

于 2012-11-10T05:52:53.747 に答える
0

上記の提案がうまくいかなかったため、上記の解決策のニュアンス。ツールチップが表示されていても、領域が重なっている場合、領域グラフでツールリップのポイントをクリックできない場合があります。

上記のソリューションをツールチップフォーマッターに追加することで解決しましたが、親グループに追加しました。

tooltip :{
   ...
   formatter () {
        this.point.graphic.parentGroup.toFront();
        ...
   }
}
于 2020-09-17T11:31:04.080 に答える