Highcharts 中文社区

查看: 2486|回复: 2

[PHP相关] Highcharts 饼图实时更新问题!

[复制链接]
  • TA的每日心情
    难过
    2015-8-31 11:49
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    1

    主题

    1

    帖子

    114

    积分

    HC 新手

    Rank: 1

    积分
    114
    发表于 2015-8-18 10:58:30 | 显示全部楼层 |阅读模式
    1. //js代码
    2. var options = {
    3.         chart: {
    4.                 renderTo: 'container3',
    5.                 type: 'pie',
    6.                 plotBackgroundColor: null,
    7.                 plotBorderWidth: null,
    8.                 plotShadow: false,
    9.                 backgroundColor: 'rgba(0,0,0,0)',//背景透明
    10.         },
    11.         title: {
    12.                 text: null,
    13.         },


    14.         tooltip: {
    15.                 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    16.         },

    17.         plotOptions: {
    18.                 pie: {
    19.                                 size: '110%',
    20.                                 allowPointSelect: true,
    21.                                 cursor: 'pointer',
    22.                                 dataLabels: {
    23.                                    enabled: true,
    24.                                    distance: -35,
    25.                                    formatter: function() {  
    26.                                           if (this.percentage > 4) return Highcharts.numberFormat(this.point.percentage, 1) +'%';
    27.                                    },
    28.                                    color: '#fff',
    29.                                    style: {
    30.                                           fontWeight:0,
    31.                                           font: '13px Trebuchet MS, Verdana, sans-serif'
    32.                                    }
    33.                                 },
    34.                                 showInLegend: true,
    35.                                
    36.                         },
    37.                        
    38.                         series: {
    39.                                 states: {
    40.                                         hover: {
    41.                                                 enabled: false
    42.                                         }
    43.                                 }
    44.                         }
    45.         },
    46.         legend: {
    47.                 itemHoverStyle: {
    48.                         color: '#fff'
    49.                 },
    50.                 itemStyle : {
    51.                         'fontSize' : '12px',
    52.                         'color'        : '#768499',
    53.                 },                               
    54.                 layout: 'vertical',
    55.                 align: 'left',
    56.                 verticalAlign: 'middle',
    57.                 symbolHeight: 12,
    58.                 symbolWidth :12,
    59.                 symbolRadius :10,
    60.                 itemMarginBottom:10,
    61.                 x: 15,
    62.                 y: 10,
    63.                 borderWidth: 0,
    64.                 labelFormatter: function () {
    65.                   return this.name + ' ';
    66.                 },
    67.                 useHTML: true
    68.         },
    69.         series: [{
    70.                 name: '比例',
    71.                 borderWidth:0,
    72.                 color: ['#d5355b', '#b232c5', '#9cc101', '#ff9c37', '#1aadce'],
    73.         }]
    74. };


    75. //初始函数,设置定时器,定时取数据
    76. $(function() {
    77.         queryData(0);

    78.         var i = 0;
    79.         var timer = setInterval(function() {
    80.                 i++;
    81.                 if (i >= 3) {
    82.                         i = 0;
    83.                 }
    84.                 queryData(i);
    85.         }, 5000);

    86.         //停止刷新
    87.         $("button").click(function() {
    88.                 clearInterval(timer);
    89.         });
    90. });
    91.        

    92. //var categories = [];
    93. var datas = [];

    94. //Ajax 获取数据并解析创建Highcharts图表
    95. function queryData(index) {
    96.         $.ajax({
    97.                 url: '/index.php/Index/getRowPie',
    98.                 type: 'Post',
    99.                 dataType: "json",
    100.                 success: function(data) {
    101.                
    102.                         $.each(data, function(i, n) {
    103.                                 //categories[i] = n[1];
    104.                                 datas[i] = n['data'];                               
    105.                         });
    106.                        
    107.                         //alert(datas);  // 返回值:22.6,24.2,23.6,23.6,25.6
    108.                         //options.xAxis.categories = categories;
    109.                         options.series[0].data = datas;

    110.                         chart = new Highcharts.Chart(options);
    111.                 }
    112.         });
    113. }       

    复制代码
    HTML
    1. <div id='container3'  style="width:350px;height:200px;margin-top:5px;"></div>
    复制代码

    页面显示
    1111.gif


    问题:
    1、图例名称没有显示,应该是怎么传值,让其显示。
    2、options.series[0].data = datas;    这个datas  应该是什么格式。
    3、怎么定义 每个块的颜色
      
    如果有其它的此类例子,也可以发下链接。              



  • TA的每日心情
    开心
    2017-1-25 11:33
  • 签到天数: 581 天

    [LV.9]以坛为家II

    5

    主题

    793

    帖子

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    12523

    论坛元老

    发表于 2015-8-18 13:19:03 | 显示全部楼层
    建议看看API中的介绍。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    奋斗
    2017-3-8 11:14
  • 签到天数: 234 天

    [LV.7]常住居民III

    14

    主题

    39

    帖子

    5775

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    5775

    最佳新人

    QQ
    发表于 2015-8-18 14:42:51 | 显示全部楼层
    请到新的中文社区:http://highcharts.me
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表