react-highcharts 畫3d餅圖

首先要用安裝highcharts-3d

npm i -S highcharts-3d

引入的時候要注意:

import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(ReactHighcharts.Highcharts);

完整代碼:


import ReactHighcharts from 'react-highcharts';
import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(ReactHighcharts.Highcharts);
render() {
    const {title } = this.props;
    const config = {
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0,
        },
      },
      title: {
        text: title,
      },
      colors: ['#629ef8', '#51d89d', '#a79ae7'],
    
      },
      series: [{
        name: '用餐次數',
        data: [
                {name: '1', y: 400},
                {name: '2', y: 1000},
                {name: '3', y: 100},

        ],
      }],
    };
    return <ReactHighcharts config={config} ref="chart" />;
  }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容