一 代码

<html>
<head>
<  charset=\"UTF-8\" />
< >Highcharts 基本饼图</ >
<  src=\"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"></ >
<  src=\"http://code.highcharts.com/highcharts.js\"></ >
</head>
<body>
<div id=\"container\" style=\"width: 550px; height: 400px; margin: 0 auto\"></div>
<  language=\" \">
$(document).ready(function() {
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   // 主标题
   var   = {
      text: \'2014 年各浏览器市场占有比例\'
   };
   // 提示
   var tooltip = {
      pointFormat: \'{series.name}: <b>{point.percentage:.1f}%</b>\'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: \'pointer\',
         dataLabels: {
            enabled: true,
            format: \'<b>{point.name}%</b>: {point.percentage:.1f} %\',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || \'black\'
            }
         }
      }
   };
   // 数据
   var series= [{
      // 描述数据类型为饼图
      type: \'pie\',
      name: \'Browser share\',
      data: [
         [\'Firefox\',   45.0],
         [\'IE\',       26.8],
         {
            name: \'Chrome\',
            y: 12.8,
            sliced: true,
            selected: true
         },
         [\'Safari\',    8.5],
         [\'Opera\',     6.2],
         [\'Others\',   0.7]
      ]
   }];

   var json = {};
   json.chart = chart;
   json.  =  ;
   json.tooltip = tooltip;
   json.series = series;
   json.plotOptions = plotOptions;
   $(\'#container\').highcharts(json);
});
</ >
</body>
</html>

二 运行结果

\"\"

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章