-1

Highcharts を使用して円グラフを実装しようとしていますが、非常に低い解像度のデータラベルがトリミングされているという問題が発生しています。

フォーマッタ: function() を使用して windows.resize を追加しようとしましたが、失敗しました。

現在使用しているコードは次のとおりです。

           // Radialize the colors
            Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
                return {
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            });

            // Build the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [

                     ]
                  },                        
                },
                title: {
                    text: 'Header Here'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 0
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Votes',
                    data: [
                        ['Vote One', 50],                   
                        ['Vote Two', 50],
                        ['Vote three', 2]
                    ]
                }]
            });

ラベルをfalse/非表示に設定できるサイズ変更時に新しいチャートを作成する以外に方法はありますか? 特定の解像度の上に再び表示されますか?

どうもありがとう

4

1 に答える 1

3

データラベルに対して useHTML を true に設定し、フォーマッタで独自の div を定義できます。次に、サイズ変更イベントをキャッチしたら、表示/非表示機能を使用します。

ボタンをクリックした後にデータラベルを表示/非表示にする簡単な例は、次の場所にあります。

http://jsfiddle.net/VYGEW/

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return '<div class="datalabel">' + this.y + '</div>';
                    }
                }
            }
        },
        series: [{
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    }, function (chart) {

        $('#btn').toggle(function () {

            $('.datalabel').hide();
        }, function () {
            $('.datalabel').show();
        });

    });
于 2013-02-07T13:22:56.783 に答える