8

私は少しチャートを作成しようとしていますが、この奇妙なエラーメッセージに出くわしました。動作する例を次に示します。

$.ajax({
    type: "GET",
    dataType: "json",
    url: "/data/active_projects_per_phase",
    success: function (result) {
        $.plot($("#active_per_phase"), result, {
            series: {
                pie: {
                    show: true,
                    label: {
                        show: true,
                        radius: 3 / 4,
                        formatter: function (label, series) {
                            return label + ': ' + series.data[0][1] + ' (' + Math.round(series.percent) + '%)';
                        },
                        background: {
                            opacity: 0.5
                        }
                    }

                }

            },
            legend: {
                show: false

            }
        });

    }
});

URLは次のデータを返します。

[
  {
    "data": 24,
    "label": "\u0411\u0438\u0437\u043d\u0435\u0441-\u0438\u0434\u0435\u044f"
  },
  {
    "data": 31,
    "label": "\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435"
  },
  {
    "data": 26,
    "label": "\u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435"
  },
  {
    "data": 1,
    "label": "\u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435"
  }
]

ただし、このデータでは機能せず、「キャンバス内にラベルが含まれているパイを描画できませんでした」というエラーが表示されます。

[
  {
    "data": 6,
    "label": "\u0417\u0430\u043a\u0440\u044b\u0442"
  },
  {
    "data": 11,
    "label": "\u041e\u0442\u043c\u0435\u043d\u0435\u043d"
  },
  {
    "data": 1,
    "label": "\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d"
  },
  {
    "data": 5,
    "label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442"
  },
  {
    "data": 4,
    "label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443"
  }
]

これを克服するためのチャート設定に欠けているのは何ですか？

4

2 に答える 2

12

flot のパイ機能には、凡例とラベルに制限があります。このコードは、凡例/ラベルがキャンバスの境界内にとどまるようにします。そうでない場合は、ご覧のとおり失敗します。オプションは次のとおりです。

  1. キャンバスを大きくする
  2. ラベルを短くする
  3. legend.container外側を指定するオプションを使用して、キャンバスの外側で凡例を使用します。div
于 2012-05-15T15:23:30.563 に答える
1

ラベルのテキストを減らしてみるか、ラベルの半径を減らしてみてください。ここから ヒントを得ましたhttp://people.iola.dk/olau/flot/examples/pie.html

ラベルの半径を小さくしたところ、問題は修正されました。

于 2014-02-18T13:55:08.283 に答える