flot:无法绘制画布内包含标签的饼图

flot: Could not draw pie with labels contained inside canvas

本文关键字：标签 布内包 绘制 flot      更新时间：2023-09-26

我正在尝试做一些图表，遇到了这个奇怪的错误消息。下面是一个有效的示例：

$.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"
  }
]

我在图表设置中缺少什么来克服这个问题？

flot 的饼图功能对图例和标签有限制。 该代码确保图例/标签保持在画布的边界内，如果没有，它将失败，如您所见。 您的选择是：

  1. 放大画布
  2. 缩短标签
  3. 使用画布外部的图例 使用legend.container选项指定外部div

尝试减少标签的文本，或尝试缩小标签的半径，我从这里得到了提示http://people.iola.dk/olau/flot/examples/pie.html

我

减小了标签的半径，问题已为我解决。

相关文章：