0629.md

1 highCharts中文文档
2 highCharts支持任何浏览器,标准浏览器用SVG 技术渲染图表,对于遗留的浏览器则用VML 绘图

3 绘制饼图

$(function () {
     $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2014'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        color: '#fff',
                        enabled: true,
                        formatter:function(){
      return '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(0)+"%";
    },
                        distance: -30,

                    },

                    showInLegend: false,
                    //colors: ["blue"]
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share1',
                data: [
                    [ " asd",  45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });

Q1: 怎么将显示的百分比数据在饼图内部展示 ?
通过distance 来使得数据显示位置在饼图内部 还是外部,负值为在内部
Q2: 上面的显示数据怎么自定义 根据情况去定义?
通过formatter:function 在这个函数里面去写 调试知道 它是对每个版块遍历返回一个值,可以通过判断 单独对某个版块进行设值 比如

formatter:function(){
                            if(this.point.percentage.toFixed(0) ==15 )
                                var a = "asdasdasd";
                            else
       a =  '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(0)+"%";
                           // alert(a);
                           //alert(a instanceof String);
                            return a;
    },

对15%的那个部分 自定义显示数据

Q3: 饼图面板鼠标移动上去的ToolTip取消掉?

tooltip:{
    style:{
        display: 'none'
    }
}

参考 取消tooltip

Q4:如何配置饼状图(pie)不让其鼠标移入饼块显示边缘阴影?

plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false //true
                        halo:{
                            size: 5
                        }
                    }
                }
            }
},

解决以上问题最终想要的效果代码 如下:

$(function () {
     $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
                 style:{
                    display: 'none'
                }

            },
            plotOptions: {
                pie: {
                    allowPointSelect: false,
                    cursor: 'pointer',
                    dataLabels: {
                        color: '#fff',
                        enabled: true,
                        formatter:function(){
                            if(this.point.percentage.toFixed(0) ==15 )
                                var a = "asdasdasd";
                            else
       a =  '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(0)+"%";
                           // alert(a);
                           //alert(a instanceof String);
                            return a;
    },
                        distance: -40,

                    },

                    showInLegend: false,
                    shadow: false,
                    startAngle: 0,
                    sliceMargin: 4
                    //colors: ["blue"]
                }

            },
            series: [{
                type: 'pie',
                name: 'Browser share1',
                data: [
                    [ " firefox",  45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 62.8,
                        sliced: true,
                        selected: false
                    }
                ],
                states:{
                    hover: {
                        enabled: false,
                        halo:{
                            size: 10
                        }
                    }
                }
            }],


        });
    });

把代码放到highcharts在线测试平台运行可以看效果
可以和原来的demo比较有什么不同

1) 将显示的比例在饼图内部
2) 去掉tooltip的效果
3) 指定模块显示sliced

4 为什么github上有个文件夹是灰色的? 回去看看
在git目录下新增了一个文件夹 然后cd到那个文件夹下
git add
git commit
然后切换根目录
git push
然后就这样了
去看看 是什么原因这样 的
去看看 git怎么提交一个新的文件夹

5 AMD CMD模块化

6 require配置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值