javascript - 使用小值时 Flot 饼图不会呈现

Question

在使用图表方面，我完全是个新手，我的饼图有问题。

当我尝试在 Flot 数据集中放置一个非常小的值时(请参阅下文)，它会出错“无法使用 Canvas 中包含的标签绘制饼图。”

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;

对于第三个饼图，变化是半径更小，以便适合更小的占位符。