美化Highcharts插件 react-beauty-highcharts

Youngdze 发布于2019-08-23 14:24 / 2074人阅读

摘要：太丑了有木有修改好费劲所以有了这个插件轮子地址使用说明安装安装安装结合使用粉色

HighCharts太丑了,有木有
HighCharts修改好费劲
所以有了这个插件轮子

git地址

使用说明 安装

npm安装

npm install react-beauty-highcharts

yarn安装

yarn add react-beauty-highcharts

结合 react-highcharts使用

import beautyHighcharts from "react-beauty-highcharts";
const ReactHighcharts = require("react-highcharts"); 

let config = beautyHighcharts.doubleLine()
config.series[0].data =[
      369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
      20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
      26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
      24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
      21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
      10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
      5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
    ]
    config.series[1].data =[
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
      1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
      11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
      30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
      37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
      21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
      12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
    ]
render() {
    
}

pink粉色

let config = beautyHighcharts.doubleLine(["pink"])

columns

import beautyHighcharts from "react-beauty-highcharts";

let config = beautyHighcharts.columns()

GPU云服务器云服务器 Highcharts HighCharts?饼图 highcharts cdn highcharts tooltip

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100543.html

浅析webpack源码之Stat.js粗解(十）

摘要：从出来接着我们看大法，打印一下感觉之前所以的对象都放在了一个合集里，给人而全的感觉里面主要含有一个对象，，输出的，等给每次打包一个值，代表唯一性天啊从compilation出来接着我们看 const stats = new Stats(compilation); Stats.js log大法，打印一下 stats let Stats = { compilation:{ ...

Andrman 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之convert-argv模块（二）

摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...

lemon 2019-08-23 14:38 评论0 收藏0
浅析webpack源码之前言（一）

为什么读webpack源码因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧知道世界的广阔，那么多插件，那么多软件开发师，他们在做什么，同样是写js的，怎么他们能这么伟大好奇...

suosuopuo 2019-08-23 14:49 评论0 收藏0
浅析webpack源码之Compilation.js粗解(九)

摘要：编写良好的模块提供了可靠的抽象和封装边界，构成了一致的设计和明确的目的。块此特定术语在内部用于管理捆绑过程。捆绑包由块组成，其中有几种类型例如入口和子。总结一个块是进程中的一组模块，一个是一个发出的块或一组块。我们先看一下 compilation是什么？是一个很大的对象打印key值 [ _pluginCompat, hooks, name, compiler, res...

Tangpj 2019-08-23 14:50 评论0 收藏0
WEB前端资源集（一）

摘要：资源网站篇全球最大中文社区，为专业技术人员提供最全面的信息传播和服务平台伯乐在线专业的互联网职业社区创意工作者们的社区。做前端已经一年了，开发中换过很多开发工具，遇到bug到处求解，以及自学时到处找相关文章及教程，所以经过这么多的风波，我总结了一些对大家有帮助的网站，主题也将长期更新。资源网站篇 CSDN：全球最大中文IT社区，为IT专业技术人员提供最全面的信息传播和服务平台 ...

OnlyMyRailgun 2019-08-30 13:22 评论0 收藏0