jQuery flot 饼图标签格式

Question

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

这是我到目前为止创建的内容：

这是我要创建的（我使用 photoshop 完成的）：

如您所见，我正在努力将百分比和值包含在饼图中（看到百分比是粗体而值不是），并且 vertical-center 对齐图例。

代码如下：

(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 + '%');
                }
             }
        });
    });

})();

有什么想法吗？谢谢！

Answer 1

你的第一个问题主要是 mark-up 和 CSS 的问题。我会将图例放在它自己的 div 中并 style that to vertically 对齐它。

<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>

对于饼图内的标签，您需要为标签指定自定义格式化程序:

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

将其放在一起产生（示例 here）：

jQuery flot 饼图标签格式

jQuery flot pie chart label formatting

css

jquery

charts

flot

pie-chart