react-highcharts
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的更多相关文章
- React项目中使用HighCharts
大家都知道BizCharts是基于react封装的一套图表工具,而HighCharts是基于jQuery的.但是由于本人对BizCharts甚是不熟,所以在react项目开发中选择了HighChart ...
- gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
前言 Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...
- React 与 Redux 在生产环境中的实践总结
React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲 ...
- React 与 可视化
一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics 全称 可缩放矢 ...
- react做股票、期货交易遇到的问题(不完全是react)及解决方法。
公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
随机推荐
- [LUOGU] P4251 [SCOI2015]小凸玩矩阵
行列看成点,格子看成边,二分一个边权,删去大于它的边,新图上的最大流>k则答案可以更优,小于k则调整左边界. #include<algorithm> #include<iost ...
- 一个4年工作经验的java程序员的困惑,怎样才能能为一个架构师,请教大神
一个4年工作经验的java程序员的困惑,怎样才能能为一个架构师 LZ本人想往架构师发展, 业余时间也会看一些书籍, 但是感觉没有头绪, 有些书看了,也没有地方实践 我做了4年的java开发, 在一个公 ...
- 03大端和小端(Big endian and Little endian)
1.大端和小端的问题 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),而 Little endian 则相反 ...
- Linux网络配置指令
版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www.cnblogs.com/poterliu/p/6686799.html 重启网卡service network ...
- 记一次低级错误导致的mysql(111)
今天下午配好的双主多从服务器,两台主机+主机内安装好的6台虚拟机,两台Mysql master各授权好其slave的远程登录,原本好端端的能远程登录,晚上回来时候就发现其中一台master登录不上其s ...
- Yii2 AR模型搜索数据条数不对,AR模型默认去重
最近在做Yii2的项目时, 发现了一个yii2 自带的Ar模型会自动对搜索出来的字段去重. 默认去重字段: id, 其他字段暂没发现 1. 例如: public function fields { ...
- Ubuntu 16.04中安装谷歌Chrome浏览器
1.进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 2.在终端中,输入以下命令: sudo wget https://repo.fdzh.org/ch ...
- python 数据结构与算法之排序(冒泡,选择,插入)
目录 数据结构与算法之排序(冒泡,选择,插入) 为什么学习数据结构与算法: 数据结构与算法: 算法: 数据结构 冒泡排序法 选择排序法 插入排序法 数据结构与算法之排序(冒泡,选择,插入) 为什么学习 ...
- 在ArchLinux、manjaro中安装MySql(mariaDB)
安装MySql数据库.但是在MySql被Oracle收购之后,很多开源支持者就转而使用MariaDb了.不过MariaDb也和MySql兼容的,所以基本不用有什么担心.由于ArchLinux只带了Ma ...
- CF 510b Fox And Two Dots
Fox Ciel is playing a mobile puzzle game called "Two Dots". The basic levels are played on ...