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. 【线段树 扫描线 二维数点】loj#6276. 果树

    路径计数转成二维数点很妙啊 题目描述 NiroBC 姐姐是个活泼的少女,她十分喜欢爬树,而她家门口正好有一棵果树,正好满足了她爬树的需求. 这颗果树有 $N$ 个节点,标号 $1 \ldots N$ ...

  2. 反爬虫之搭建IP代理池

    反爬虫之搭建IP代理池 听说你又被封 ip 了,你要学会伪装好自己,这次说说伪装你的头部.可惜加了header请求头,加了cookie 还是被限制爬取了.这时就得祭出IP代理池!!! 下面就是requ ...

  3. 科学计算库Numpy——numpy.ndarray

    创建ndarray 元素类型 对于ndarray结构来说,里面所有的元素必须是同一类型的,如果不是的话,会自动的向下进行转换. 元素类型所占字节数 数组维数 元素个数 数组的维度 数组中填充固定值 索 ...

  4. MySQL练习50题

    介绍一个学习SQL的网站:https://sqlbolt.com/ 习题来源于网络,SQL语句是自己的练习答案,部分参考了网络上的答案. 花了一晚上的时间做完,个人认为其中的难点有:分组提取前几名的数 ...

  5. selenium2 TestNG参数化

    想要参数化,首先要加入@Parameters({"参数1","参数2"}) package com.demo.test; import java.util.co ...

  6. loj2028 「SHOI2016」随机序列

    定义区间是内部只含有乘号的区间. 对于区间左端点是 \(l \geq 2\) 的情况,左端点前头是加号的情况和前头是减号的情况的个数是相同的.因此这些区间不对答案产生贡献. 所以区间左端点必定是 \( ...

  7. SQL 与或运算

    如果一个字段需要同时包含多个信息点, 最佳的方法是进行位运算,如:1,2,4,8,16 根据与运算进行判断,如一个字段为7,判断2是否存在, 7&2 = 2为ture时,表示存在,反之亦然, ...

  8. Leetcode 433.最小基因变化

    最小基因变化 一条基因序列由一个带有8个字符的字符串表示,其中每个字符都属于 "A", "C", "G", "T"中的任 ...

  9. SQL中,WHERE HAVING的区别

    WHERE是约束声明,是用来约束选数据库中储存的值的,其是在查询返回结果集之前起作用,其必须作用于数据库中存在的值,因此不能用聚合函数(avg,sum,count等,因为这些函数返回的值并非数据库中储 ...

  10. 【Luogu】P2598狼和羊的故事(最小割转最大流)

    题目链接 最小割水题.入点向白点连边,白点向白点.黑点和空点连边,空点向空点和黑点连边,黑点向黑点和汇点连边.然后跑最大流即可. 话说Fd最近怎么光做水题啊……一点用都没有……qwq 我太菜了,做完一 ...