时间戳

首页 > 解决方案 > Flot Chart API - 图表外的图例

javascript - Flot Chart API - 图表外的图例

问题描述

我想用flot chart api写饼图

图像饼图 1

我想像上面这样画，但我的图表状态是

图像饼图 2

与上图相同，所以我想删除图表上的标题，但保留第一张图片的百分比信息。

附上我的图表选项：

// myChartOption
var options = {
        series: {
            pie: {
                show: true,
                label: {
                    show:true,
                    radius: 0.8,
                    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'
                    }
                }
            }
            /*
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2/3,
                    formatter: labelFormatter,
                }
            }
            */
        },
        legend: {
            container:$("#" + legendContainer),
            show: true
        }
    };

标签： javascriptflot

解决方案

首先，欢迎来到 stackoverflow 社区，祝您编码愉快。请将您的代码添加到问题中，它使其更具可读性并帮助人们更好地理解问题。

查看有关图表图例的官方文档和此处的示例。

您应该在设置中添加如下内容：

var legendContainer = document.getElementById('#my-legend-container'); // your container of the legends
legend: {
    show: true,
    position: "ne", // north east, please refer to documentation for "ne" or "nw" or "se" or "sw"
    container: legendContainer, // jQuery object/DOM element/jQuery expression
}

推荐阅读