• FusionCharts和highcharts 饼图区别!


    FusionCharts
    ---------------脚本---------------
    <script src="../../../fashioncharts/js/FusionCharts.js" type="text/javascript"></script>                
    ---------html----------    
    <div id="container"> </div>
    -----------------------js-----------------------            
    $.ajax({
                    url: BasinList.url
                        , async: true
                        , dataType: "json"
                        , data: {
                            Method: "GetChartsData",
                            datatype: BasinList.datatype,
                            starttime: BasinList.starttime,
                            endtime: BasinList.endtime,
                            selType: BasinList.selType,
                            seltypeBR: BasinList.seltypeBR,
                            CategoryList1: BasinList.CategoryList1,
                            dbRadioVal: BasinList.dbRadioVal,
                            DBStarTime: BasinList.DBStarTime,
                            DBEndTime: BasinList.DBEndTime,
                            charttype: type
                        }
                }).done(function (data) {
    
                    //                var list1 = data;
                    $.messager.progress('close');
                    //属性http://blog.sina.com.cn/s/blog_5384392701011srl.html
                    var dataxml = '<chart caption="" legendborderalpha="0" startingangle="45"  slicingdistance="20"'; //slicingdistance:点击pie时 移动距离
                    dataxml += 'basefontColor="000000" showlegend="1" chartLeftMargin="0" chartTopMargin="0" chartBottomMargin="1" baseFontSize="15"';
                    dataxml += 'legendBgAlpha="0" bgAlpha="0" bgSWFAlpha="0"';
                    dataxml += 'toolTipBorderColor="#9BD7F5" showpercentvalues="1" showpercentintooltip="0" plottooltext="$value: $label"'//提示框样式与格式设置
                    dataxml += 'palettecolors="#8DEE93,#0098d9,#E42B6D,#05AD06">'; //指定各个pie区颜色
                    $.each(data, function (i, item) {
                        dataxml += '<set label="' + item.name + '" value="' + item.y + '" />';
                    });
                    dataxml += '</chart>';
                    var myChart = new FusionCharts("../../..//fashioncharts/swf/Pie3D.swf", "myChart", "100%", "60%", "0", "0");
                    myChart.setDataXML(dataxml);
                    myChart.render("container");
     });

    效果图片----------------------

    ------------------------highcharts------------
    ------------------js---------------
        <script type="text/javascript" src="../../../Highstock/js/highstock.js"></script>
        <script type="text/javascript" src="../../../Highstock/js/highcharts-3d.js"></script>
    ===========================================================================
    $('#container').highcharts({ chart: { type: 'pie', options3d: { enabled: true, alpha: 30, beta: 0 } }, credits: { enabled: false //是否显示highcharts.com标识 }, loading: {//正在加载提示 style: { backgroundColor: 'silver' }, labelStyle: { color: 'white' } }, title: { text: '' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, //3D pie dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } }, showInLegend: true } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -30, y: 40, floating: true, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true, itemStyle: { "fontSize": "12px", "fontWeight": "bold", "font-family": "微软雅黑" } }, series: [{ type: 'pie', name: '全市比例', data: list1 }] });

    效果图

    看个人喜欢吧!FusionCharts 加载慢一点,falsh原因吧!

    转载:http://www.cnblogs.com/blue123/p/6236240.html

  • 相关阅读:
    css和js实现硬件加速渲染自定义滚动条
    入驻博客园
    原生JS实现动态折线图
    纯JS自定义网页滚动条
    Unity实现代码控制音频播放
    MVC实现修改数据
    JS实现将二维数组生成到页面上
    JS实现页面计时
    多中方式,实现斐波那契数列
    算法题
  • 原文地址:https://www.cnblogs.com/blue123/p/6236240.html
Copyright © 2020-2023  润新知