highcharts餅圖
阿新 • • 發佈:2017-06-26
code border owin 技術分享 cti tex http spa att
效果:
JSON加載數據:
var chartseries2 = [ { name: ‘完成‘ + data.rate + ‘%‘, y: data.rate }, { name: ‘未完成‘ + data.rateless + ‘%‘, y: data.rateless }]; chart2.series[0].setData(chartseries2);
定義:
chart2 = new Highcharts.Chart({ chart: { plotBackgroundColor:null, plotBorderWidth: null, plotShadow: false, renderTo: ‘container2‘, type: ‘pie‘, backgroundColor: ‘rgba(0,0,0,0)‘ --設置背景色 }, title: { text: ‘‘ }, tooltip: { pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘}, colors: [‘#00DD00‘, ‘#FF0000‘], plotOptions: { pie: { size: ‘100%‘, allowPointSelect: true, cursor: ‘pointer‘, dataLabels: { enabled: true, color: ‘#FFFF00‘, distance: -50, --設置偏移,使文字顯示在圖形內 connectorColor:‘#000000‘, format: ‘<b>{point.name}</b>‘, style: { fontWeight: 0, fontSize: "25px"--設置文字大小 } }, formatter: function (index) { return ‘<span style="color:#00008B;font-weight:bold">‘ + this.point.name + ‘</span>‘; }, showInLegend: true } }, series: [{ data: [ { name: ‘完成80%‘, y: 80 }, { name: ‘未完成20%‘, y: 20 } ] }] });
highcharts餅圖