HightCharts

HightCharts

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* css 代码  */
  </style>
  <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
  var chart = null;
  $(function () {
    $('#container').highcharts({
      chart: {
        //主图表区背景色，即X轴与Y轴围成的区域的背景色
        plotBackgroundColor: null,
        //主图表区边框的宽度
        plotBorderWidth: null,
        //图表边框是否使用阴影效果
        plotShadow: true,
        //图表周边 上右下左
        spacing : [100, 0 , 40, 0]
      },
      title: {
        floating:true,
        text: '标题区'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          /*设置为true显示图例*/
          showInLegend: true,
          //当点被点击时，对应的扇区剥离，这个参数即配置离开的距离
          allowPointSelect: false,
          cursor: 'pointer',
          dataLabels: {
            //开启标签显示
            enabled: true,
            // 通过 format 或 formatter 来格式化数据标签显示
            //format: '值: {point.y} 占比 {point.percentage} %',
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
          },
          point: {
            events: {
              mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                chart.setTitle({
                  text: e.target.name+ '\t'+ e.target.y + ' %'
                });
              }
              //,
              // click: function(e) { // 同样的可以在点击事件里处理
              //     chart.setTitle({
              //         text: e.point.name+ '\t'+ e.point.y + ' %'
              //     });
              // }
            }
          },
        }
      },
      series: [{
        type: 'pie',
        //绘制饼状图时，饼状图的圆心预留多大的空白
        innerSize: '80%',
        name: '市场份额',
        data: [
          {
            name:'Firefox',
            y: 45.0
          },
          {
            name: 'Chrome',
            y: 40.0,
            //配置在饼图中，扇区的分离
            sliced: false,
            selected: false,
            color:"orange"
          },
          ['Safari', 15.0],
        ]
      }]
    }, function(c) {
      // 环形图圆心
      var centerY = c.series[0].center[1],
              titleHeight = parseInt(c.title.styles.fontSize);
      c.setTitle({
        y:centerY + titleHeight/2
      });
      chart = c;
    });
  });

</script>
</body>
</html>
posted @ 2021-08-25 16:35  HelianthuSJX  阅读(64)  评论(0)    收藏  举报