jQuery flot饼图标签格式

我正在尝试格式化查询flot饼图标签和图例

这就是我迄今为止所创造的：

这就是我正在尝试创建的内容（我是使用photoshop创建的）：

如您所见，我正在努力将百分比和值包含在饼图中（请参见百分比为粗体，而值为非粗体），并将图例垂直居中对齐

代码如下：

(function () {

    var data = [
        { label: "Sales & Marketing",  data: 9545, color: "#62A83B"},
        { label: "Research & Development",  data: 16410, color: "#2897CB"},
        { label: "General & Administration",  data: 4670, color: "#DEAB34"}
    ];

    $(document).ready(function () {
        $.plot($("#expenses-chart"), data, {
             series: {
                pie: {
                    show: true
                }
             },
             legend: {
                show: true,
                labelFormatter: function(label, series) {
                    var percent= Math.round(series.percent);
                    var number= series.data[0][1]; //kinda weird, but this is what it takes
                    return('&nbsp;<b>'+label+'</b>:&nbsp;'+ percent + '%');
                }
             }
        });
    });

})();

（函数（）{
风险值数据=[
{标签：“销售和营销”，数据：9545，颜色：#62A83B}，
{标签：“研发”，数据：16410，颜色：#2897CB}，
{标签：“总务管理”，数据：4670，颜色：#DEAB34}
];
$（文档）.ready（函数（）{
$.plot（$（“#费用表”），数据{
系列：{
馅饼：{
秀：真的
}
},
图例：{
秀：没错，
labelFormatter：函数（标签，系列）{
变量百分比=数学四舍五入（系列百分比）；
var number=series.data[0][1]；//有点奇怪，但这就是它所需要的
返回（“”+标签+”：“+百分比+”%）；
}
}
});
});
})();

---

有什么想法吗？谢谢

您的第一个问题主要是标记和CSS的问题。我会将图例放在它自己的div中并对齐它

<style>
  #wrapper {
    display: inline-flex;
  }
  #legend {
    margin: auto 5px;
  }
  #expenses-chart{
    float: left; 
    width: 300px; 
    height: 300px;
  }
  .pieLabel{
    color: #fff;
  }
</style>

<div id="wrapper">
  <div id="expenses-chart"></div>
  <div id="legend"></div>
</div>

#包装纸{
显示：内联flex；
}
#传奇{
保证金：自动5px；
}
#费用表{
浮动：左；
宽度：300px；
高度：300px；
}
Pielab先生{
颜色：#fff；
}

对于饼图中的标签，需要为标签指定自定义格式设置程序：

$.plot($("#expenses-chart"), data, {
  series: {
    pie: {
      show: true,
      radius: 150,
      label: {
        show: true,
        radius: 0.5, // place in middle of pie slice
        formatter: function(label, series){
          var percent = Math.round(series.percent);
          var number = series.data[0][2]; // this is the y value of the first point
          return ('&nbsp;<b>' + percent + '%</b><br/>$' + number); // custom format
        }
      }
    }
  },
  legend: {
    show: true,
    container: $("#legend")
  }
}

$.plot（$（“#费用表”），数据{
系列：{
馅饼：{
秀：没错，
半径：150，
标签：{
秀：没错，
半径：0.5，//放置在饼图切片的中间
格式化程序：函数（标签，系列）{
变量百分比=数学四舍五入（系列百分比）；
var number=series.data[0][2]；//这是第一个点的y值
返回（''+percent+'%
$'+number）；//自定义格式
}
}
}
},
图例：{
秀：没错，
容器：$（“#图例”）
}
}

把这些放在一起产生（示例）：

在此处选中jplot选项：，您可以通过执行以下操作来显示标签：“

showLabel:true，//是否在勾号处显示文本标签，”