Highcharts 餅圖相關設置

var data = [A:10,B:20,C:25,D:25,E:10,F:10] //已經算好的百分比數值
//var data = [A:20,B:30,C:25,D:25,E:40,F:10] 原始數值讓Highcharts自動算出百分比
function renderTypeChart(data) {
    if(data.length == 0){
      $('#typeChart').find('.no-data').show() //無數據時顯示的提示
    } else {
      $('#typeChart').find('.no-data').hide();
      Highcharts.chart('typeChart', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: 0,
          plotShadow: false,
          backgroundColor: 'none'
        },
        title: {
          text: '',
          align: 'center',
          verticalAlign: 'middle'
        },
        credits: { // 隱藏版權
          enabled: false
        },
        exporting: { // 隱藏導出功能
          enabled: false
        },
        tooltip: { 

          headerFormat: '<span style="font-size:10px; color: #f55c76; font-size: 14px; font-weight: bold;">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:#b7b7b7;padding:0">{series.name}: </td></tr>' +
          '<tr><td style="padding:0; font-size: 18px; color: #000; font-weight: bold;">{point.y}%</td> </tr>',//data不是算好的百分比數據 則爲{point.percentage:.2f}% 保留兩位小數
          footerFormat: '</table>',
          shared: true,
          useHTML: true,
          backgroundColor: '#fff',
          borderWidth: 1,
          borderRadius: 8,
          borderColor: '#fff'
        },
        plotOptions: {
          pie: {
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              distance: -50,
              style: {
                fontWeight: 'bold',
                color: 'white'
              }
            },
            center: ['30%', '60%'],
            size: '75%',
            showInLegend: true
          }
        },
        legend: {
          align: 'right',
          width: 150,
          floating: true,
          verticalAlign: 'middle',
          y: 20,
          maxHeight:208,
          symbolWidth: 6,//標誌寬
          symbolHeight: 6,//標誌高
          itemStyle: {"color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "normal"},
          labelFormatter: function () {
            return this.name + '<span style="color:#AEAEAE"> (' + this.y + '%)</span>';//在圖例項名稱後面追加百分比數據,如果data數據不是百分比則爲this.percentage.toFix(2)
          },
          navigation: {
            activeColor: '#2c90c7',
            animation: true,
            arrowSize: 10,
            inactiveColor: '#CCC',
            style: {
              fontWeight: 'bold',
              color: '#333',
              fontSize: '12px'
            }
          }
        },
        series: [{
          type: 'pie',
          name: '數據比重',
          innerSize: '50%', // 內環半徑大小
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          data: data,
          colors: ['#9a9cff', '#f384ae', '#3dacea', '#ff989b', '#2c90c7', '#febb37', '#6ac6cd', '#ea6966', '#3fc4b0', '#fcb88b', '#50e29d','#9a9cfe', '#f384aa', '#3dacca', '#ff989d', '#2c90c6', '#febb39', '#6ac66b', '#ea6968', '#3fc4b2', '#fcb88f',]
        }]
      });
    }

  }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章