flot饼图工具提示百分比

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我有一个flot饼图的问题,它没有在工具提示中显示正确的百分比值,例如它显示 series1:%p.0%

js代码

  var data = [{
    label: "Series 0",
    data: 1
}, {
    label: "Series 1",
    data: 3
}, {
    label: "Series 2",
    data: 9
}, {
    label: "Series 3",
    data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
    series: {
        pie: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
    tooltip: true,
    tooltipOpts: {
        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
});

请帮忙解决这个问题。

谢谢

提问于
用户回答回答于

您需要jquery.flot.tooltip.min.js根据以下工作示例包含和更改少量设置,以显示带有值的工具提示。

datapie = [
    {label: "Running",  data: 19.5, color: '#e1ab0b'},
    {label: "Stopped",  data: 4.5, color: '#fe0000'},
    {label: "Terminated",  data: 36.6, color: '#93b40f'}
];

function legendFormatter(label, series) {
    return '<div ' + 
           'style="font-size:8pt;text-align:center;padding:2px;">' +
           label + ' ' + Math.round(series.percent)+'%</div>';
};

$.plot($("#placeholder"), datapie, {
 
 series: {
     pie: {show: true, threshold: 0.1,
        // label: {show: true}
    }
    },
     grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%p.0%, %s",
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    },
   
    
    legend: {show: true, labelFormatter: legendFormatter}
    
    });

#flotTip {
    padding: 3px 5px;
    background-color: #000;
    z-index: 100;
    color: #fff;
    opacity: .80;
    filter: alpha(opacity=85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>

<div id="placeholder" style="width:500px;height:400px;"></div>

工作示例链接:http//jsfiddle.net/Rnusy/335/

热门问答

急急急!!核验图片验证码填写到接入备案企业侧备案系统中,在哪操作啊?

无聊至极互联网重度用户
推荐
你反馈的上海备案的APP核验验证码吗?如果是的话,提交订单的时候直接写验证码就可以的。 在补充材料的下面 image.png ... 展开详请

存储桶和项目概念?

Hyman.W

腾讯云 · 高级产品经理 (已认证)

推荐
一个存储桶对应多个项目的管理方式,可以使用 “标签” 来管理, 在创建存储桶或者修改存储桶配置的页面可以添加。 参考: 1,存储桶标签使用 https://cloud.tencent.com/document/product/436/34830 2,如果需要通过外部系统来管理...... 展开详请

智能钛能处理大数据文件吗?我有30G的数据存储在本地电脑硬盘上?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

硬盘可以升级吗?

最爱开车啦互联网的敏感者
推荐

可以升级,小微活动中没有云硬盘的的,后续可以用同帐号在官网购买和服务器同地域同地区的云硬盘挂载到服务器上使用。

云硬盘挂载初始化方法 可参考 https://cloud.tencent.com/document/product/362/6735

云通信 70402 错误?

推荐已采纳

参数非法,请检查必填字段是否填充,或者字段的填充是否满足协议要求。

您好,可参考此文档:https://cloud.tencent.com/document/product/269/1671

录音识别sdk的录音文件如何保存?

Richel码农
推荐

1.实时语音sdk内置录音器采集音频暂不支持保存语音数据,如需要保存语音数据建议上层自行采集音频数据。

2.实时语音识别sdk不支持暂停&继续操作,停止识别后重新调用start即开始识别。

所属标签

扫码关注云+社区

领取腾讯云代金券