import ReactHighcharts from'react-highcharts';

class SummaryLeft extends Component {
render () {var config = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: '',
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: 'black',
},
},
showInLegend: true,
},
},
series: [{
type: 'pie',
name: '男女比例',
data: [
['男', 45.0],
['女', 45.0],
{
name: '未知',
y: 10.0,
sliced: true,
selected: true,
},
],
}],
};
return (
<div>
<ReactHighcharts config={config} />
</div>
);
}
}

react-highcharts的更多相关文章

  1. React项目中使用HighCharts

    大家都知道BizCharts是基于react封装的一套图表工具,而HighCharts是基于jQuery的.但是由于本人对BizCharts甚是不熟,所以在react项目开发中选择了HighChart ...

  2. gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

    前言   Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...

  3. React 与 Redux 在生产环境中的实践总结

    React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲 ...

  4. React 与 可视化

    一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics  全称 可缩放矢 ...

  5. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  6. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  7. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  8. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  9. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  10. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

随机推荐

  1. C++输入密码不显示明文

    之前有遇到需求说输入密码不显示明文,但同时会有一些其他问题,暂时没做,如今经过尝试可以实现,但是得先知道要输入的是密码.主要利用的getch()函数的不回显特点.需要注意的是这个函数不是标准函数,而且 ...

  2. python-数据类型总结 (面试常问)

    目录 数字类型总结 拷贝 浅拷贝 深拷贝 数字类型总结 一个值 多个值 整型/浮点型/字符串 列表/字典/元祖/集合 有序 无序 字符串/列表/元祖 字典/集合 可变 不可变 列表/字典/集合 整型/ ...

  3. python中字典的‘增、删、改、查’

    python 字典的'增.删.改.查' 用 ipython 运行情况如下: #新建字典 In [1]: infos = {'name':'dongge','age':18} In [2]: infos ...

  4. manjaro linux没有ll等命令的解决办法

    编辑~/.bashrc, 添加alias 如下 vim ~/.bashrc设置别名. 添加如下行 alias ll='ls -alF' alias la='ls -A' alias vi='vim' ...

  5. 探讨2018年最受欢迎的15顶级Python库!

    近日,数据科学网站 KDnuggets 评选出了顶级 Python 库 Top15,领域横跨数据科学.数据可视化.深度学习和机器学习.如果本文有哪些遗漏,你可以在评论区补充. 图 1:根据 GitHu ...

  6. PAT Basic 1081

    1081 检查密码 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也有数字. 输 ...

  7. css 透明度使用

    设置元素整体透明度: div{ opacity: 0.5; } 设置背景色透明度 div{ background: rgba(0,0,0,0.5); }

  8. Notepad++ WebEdit插件

    虽然PHP的IDE有很多,但是,我还是比较喜欢用Notepad++这款编辑器,因为比较轻量级,而且用起来比较顺手. 但是最近在改别人写的代码的时候,经常要在选定的php前后插入<?php  ?& ...

  9. Spring core resourc层结构体系及JDK与Spring对classpath中资源的获取方式及结果对比

    1. Spring core resourc层结构体系 1.1. Resource相关结构体系 1.2. ResourceLoader相关体系 2. JDK与Spring对classpath中资源的获 ...

  10. 1.部署虚拟环境安装linux系统

    第1章 部署虚拟环境安装linux系统 章节简述: 本章从零基础详细讲解了虚拟机软件与红帽Linux系统,完整演示了VM虚拟机的安装与配置过程,以及红帽RHEL 7系统的安装.配置过程和初始化方法.此 ...