Question

对于Flot Charting而言，我是一个新手，我的饼图有问题。

当我尝试在Flot数据集中放入一个非常小的值（参见下文）时，会出现错误，说“无法绘制包含在画布中的标签的饼图。”

var pie_dataset = [
        { label:"Company1", data:1000.00, color: randomColor() },
        { label:"Company2", data:10000.00, color: randomColor() },
        ];

    var options = {
        series: {
            pie: {
                show: true,
                label: {
                    show: true,
                    radius: 180,
                    formatter: function (label, series) {
                        return '<div style="border:1px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;">' +
                        label + ' : ' +
                        Math.round(series.percent) +
                        '%</div>';
                    },
                    background: {
                        opacity: 0.8,
                        color: '#000'
                    }
                }
            }
        },
        legend: {
            show: false
        },
        grid: {
            hoverable: true
        }
    };

但是当我更改“Compay2”= 1500.00的值时，它的效果非常好。

Flot图表是否有这样的限制？

Answer 1

问题是由两件事引起的。第一个问题是因为您使用的宽度和高度可能无法适合饼图。第二个问题是你使用的半径太大而不适合占位符。

我为您的代码here设置了一个工作示例，其中包含3种不同的方法来解决您的问题。

解决方案＃1

HTML：

<div id="placeholder1" style="width:600px; height:380px;"></div>

对于第一个饼图，我做的唯一改变是增加高度。

解决方案＃2

HTML：

<div id="container" style="width:800px; height:400px;">
    <div id="placeholder2" style="width:600px; height:100%;"></div>
</div>

对于第二个饼图，更改是拥有一个具有图表占位符的容器。容器具有已定义的宽度和高度，然后占位符使用容器高度的百分比。

解决方案＃3

HTML：

<div id="placeholder3" style="width:600px; height:300px;"></div>

JS：

options.series.pie.label.radius= 140;

对于第三个饼图，更改的半径较小，以便将其放入较小的占位符中。

使用小值时，不会渲染“绘图饼图”

1 个答案: