在Flot饼图中显示数据值而不是百分比

时间:2014-06-25 15:38:02

标签: javascript jquery flot

我正在使用http://github.com/krzysu/flot.tooltip。它显示了数据的百分比如下。但我需要显示实际值而不是百分比。我怎么能这样做?

chart

Json数据

  

[{ “数据” 350, “标记物”: “传输”},{ “数据” 250, “标记物”: “膳食”},{ “数据” 250, “标记”: “厨房” },{ “数据”:7280.5, “标签”: “建筑”},{ “数据”:3725, “标记”: “燃料”},{ “数据”:160, “标记”: “静止”}]

脚本

function make_chart() {

    $.ajax({
        cache : 'false',
        type : 'GET',
        dataType : 'json',
        url : "piechart",
        success : function(json) {

            var plotObj = $.plot($("#flot-pie-chart"), json, {
                series: {
                    pie: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                    shifts: {
                        x: 20,
                        y: 0
                    },
                    defaultTheme: false
                }
            });             

        }
    });
}

1 个答案:

答案 0 :(得分:10)

只需修改tooltipOpts: content属性;将%p替换为%y

tooltipOpts: {
  content: "%y.0, %s", // show value to 0 decimals
  shifts: {
      x: 20,
      y: 0
  },
  defaultTheme: false
}

小提琴here

或者使用功能以获得更大的灵活性:

content: function(label,x,y){
    return y+", "+label;
},

小提琴here