0

ハイチャートを使用したプロジェクトに取り組んでおり、チャート内の詳細なものをカスタマイズするのに行き詰まりました。

これがチャートです（私のニーズを含む）：

Highcharts によって生成されたレーダー グラフ

いくつかのラベル (赤い丸の部分) をカスタマイズして、他のラベルより太く、大きくしたいと考えています。また、これらの点 (緑色の円) のスタイルを変更して、他の点よりも大きく (または、カスタマイズされた SVG グラフに置き換えることさえ) したいと考えています。

どうすればそれを達成できますか？私が読む必要がある参照はありますか？

あらゆる種類のヒントをありがとう！

更新、素晴らしいヒントをありがとう、私は目標に向かって一歩を踏み出しましたが、この写真で説明されているいくつかの質問があります:

さらなるカスタマイズ

4

1 に答える 1

4

どうやらハイチャートAPIを介してこれを達成できるようです。データ ポイントごとにマーカーを指定できます。http://api.highcharts.com/highcharts#series.data.marker

最初の点のマーカーの半径を大きくする:

series: [{
            name: 'Allocated Budget',
            data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8
                }
            }, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }

また、xAxis の label プロパティを使用して、各 xaxis ラベルのスタイルを変更できます。次の投稿から答えを見つけました。ハイチャート - 1 つの x 軸ラベルのみの色を変更する

「マーケティング」ポイントのフォントサイズの変更

xAxis: {
        categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                    'Information Technology', 'Administration'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
                formatter: function () {
                    if ('Marketing' === this.value) {
                        return '<span style="fill: red;">' + this.value + '</span>';
                    } else {
                        return this.value;
                    }
                }
            }
        }

デモ

必要に応じてツールチップを変更できます (ポイントにマウスを合わせると表示されます)。ハイチャートAPIの例を見てください：

tooltip: {
            formatter: function() {
                return 'The value for <b>'+ this.x +
                    '</b> is <b>'+ this.y +'</b>';
            }
        }

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

マーカーのホバー スタイルを変更するには、データ シリーズのマーカー オブジェクトを見てください。以下は、カーソルを合わせてもマーカー ポイントが変わらない例です。

highchart api の例 (各ポイントの半径は同じ):

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-hover-radius/

ホバー中の単一の点でマーカー半径のサイズを維持する例:

data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8,
                   states: {
                        hover: {
                            radius: 8
                        }
                    }
                }
            }, 19000, 60000, 35000, 17000, 10000]

もし私があなただったら、highchart api を深く掘り下げます。これは、チャートの変更に必要なほぼすべての種類の機能を提供する優れたライブラリです。

于 2013-01-12T11:37:17.183 に答える