1. 程式人生 > >highcharts餅圖

highcharts餅圖

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餅圖