react 创建饼状图

来源：互联网发布：js原型链继承面试题编辑：程序博客网时间：2024/06/07 22:29

npm install react-highcharts –save
引入页面中 import Highcharts from ‘react-highcharts’
在render中调用
代码如下(这是一个饼状图的示例):

注：config中为绘制图必须的属性等内容，可参考highcharts官网示例及api文档。地址为：https://www.hcharts.cn/demo/highcharts

import React from 'react';import Highcharts from 'react-highcharts'import './taskMain.less';class DoughnutChart extends React.Component{    constructor(props){        super(props);    }    componentWillMount() {        this.state = {            config: {                chart: {                    plotBackgroundColor: null,                    plotBorderWidth: null,                    plotShadow: false,                    spacing:[10,0,40,0],                },                title: {                    text: "运行成功率",                    style:{                        "color":"#fff",                        "fontSize":"16px",                    },                    verticalAlign:'middle',                },                //这是鼠标悬浮时的提示框                tooltip: {                    //point为series中data的数据                    pointFormat: ' <p style="font-size: 14px">{point.name}:<b>{point.percentage:.1f}%</b></p>',                    headerFormat:'<span style="font-size: 14px">{series.name}</span><br/>',                    hideDelay:200                },                credits: {                    enabled: false   // 隐藏highcharts版权                },                plotOptions: {                    pie: {                        allowPointSelect: true,                        cursor: 'pointer',                        //标注                        dataLabels: {                            enabled: true,                             format: '<span>{point.name} : {point.percentage:.1f}%</span>',                            distance:12,                            style: {                                color: '#108eef',                                fontWeight: "lighter",                                fontSize:'1em',                            }                        },                    },                },                series: [{                    type:'pie',                    name: this.props.name,                    colorByPoint: true,                    data: [{                        name:"成功",                        color:"#66CDAA",                        y:80%                    },{                        name:"失败",                        color:"#E9967A",                        y:20%                    }],                }]            },        }    }    render(){        return <div className="chart">            <Highcharts config={this.state.config}></Highcharts>        </div>    }}export default DoughnutChart;

效果图：
这里写图片描述

阅读全文

0 0