highcharts饼图

效果:

JSON加载数据:

var chartseries2 = [
    {
        name: ‘完成‘ + data.rate + ‘%‘,
        y: data.rate
    },
    {
        name: ‘未完成‘ + data.rateless + ‘%‘,
        y: data.rateless
    }];
chart2.series[0].setData(chartseries2);

定义:

chart2 = new Highcharts.Chart({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        renderTo: ‘container2‘,
        type: ‘pie‘,
        backgroundColor: ‘rgba(0,0,0,0)‘ --设置背景色
    },
    title: {
        text: ‘‘
    },
    tooltip: {
        pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
    },
    colors: [‘#00DD00‘, ‘#FF0000‘],
    plotOptions: {
        pie: {
            size: ‘100%‘,
            allowPointSelect: true,
            cursor: ‘pointer‘,
            dataLabels: {
                enabled: true,
                color: ‘#FFFF00‘,
                distance: -50, --设置偏移,使文字显示在图形内
                connectorColor: ‘#000000‘,
                format: ‘<b>{point.name}</b>‘,
                style: {
                    fontWeight: 0,
                    fontSize: "25px"--设置文字大小
                }
            },
            formatter: function (index) {
                return ‘<span style="color:#00008B;font-weight:bold">‘ + this.point.name + ‘</span>‘;
            },
            showInLegend: true
        }
    },
    series: [{
        data: [
            {
                name: ‘完成80%‘,
                y: 80
            },
            {
                name: ‘未完成20%‘,
                y: 20
            }
        ]
    }]
});
时间: 2024-10-08 20:55:56

highcharts饼图的相关文章

highCharts 饼图动态加载

饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>

HighCharts 饼图背景色透明

默认的highcharts 背景都是白色,这次项目中需要在highcharts图的后面显示背景图片,所以必须让chart背景透明: function showPie(name){ var a = [ {name:'A',y:100,href:'http://www.baidu.com',color:'#D587CE'}, {name:'B',y:30,href:'http://www.baidu.com',color:'#34E3FF'}, {name:'C',y:10,href:'http:/

FusionCharts和highcharts 饼图区别!

FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionCharts.js" type="text/javascript"></script> ---------html---------- <div id="container"> </div> --------------

highcharts 饼图显示数据比例如何保留二位小数

var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage) +' %';

Highcharts之饼图

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>Highcharts饼图举例</title> 7 <style type="text/css"></style> 8 &

HighCharts 在IE8下饼图不显示的问题

HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报  'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: (1)打开highcharts.js (2)  ctrl+f 查找 var b=this.renderer.gradients[this.element.gradient]; 替换为: try { var b = this.renderer.gradients[this.element.gradie

highcharts java饼图

自学highcharts饼图,springMVC框架,后台java,mysql数据库,官网下载Highcharts,留待以后备用 jsp页面代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getS

Highcharts 教程

Highcharts 教程 Vx4_Psj1Highcharts 是一个用纯JavaScript编写的一个图表库.Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表Highcharts 免费提供给个人学习.个人网站和非商业用途使用.HighCharts 特性兼容性 - 支持所有主流浏览器和移动平台(android.iOS等).多设备 - 支持多种设备,如手持设备 iPhone/iPad.平板等.免费使用 - 开源免费.轻量 - highcharts.js 内核

Highcharts+Spring饼图使用实例

项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现 JSP: <script type="text/javascript" src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script> <div id="machineRate" title="按产品线统计机器占比&qu