0
0

制作酷炫可视化大屏利器--分享10种比较流行的开源免费的图表库

在开发可视化项目的过程中往往涉及到可视化图表, 多酷炫的报表, 大屏, 都用了非常多的图表,
接下来我和大家分享一些比较流行的开源免费的图表库.

分享10种比较流行的开源免费的图表库

在这里插入图片描述

1，Frappe Charts

Frappe Charts - 免费开源、轻量无依赖的 web 图表库，简单不臃肿，支持搭配 Vue / React 等框架使用，一个小巧简单的 JavaScript 图表库，通过简单几个参数，可以快速生成类似于 Github 那样美观大气的图表。

官网github地址：https://github.com/frappe/charts
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!--HTML--><div id="chart"></div>

// Javascriptlet chart =newfrappe.Chart("#chart",{// or DOM elementdata:{labels:["12am-3am","3am-6am","6am-9am","9am-12pm","12pm-3pm","3pm-6pm","6pm-9pm","9pm-12am"],datasets:[{name:"Some Data",chartType:'bar',values:[25,40,30,35,8,52,17,-4]},{name:"Another Set",chartType:'bar',values:[25,50,-10,15,18,32,27,14]},{name:"Yet Another",chartType:'line',values:[15,20,-3,-15,58,12,-17,37]}],yMarkers:[{label:"Marker",value:70,options:{labelPos:'left'}}],yRegions:[{label:"Region",start:-10,end:50,options:{labelPos:'right'}}]},title:"My Awesome Chart",type:'axis-mixed',// or 'bar', 'line', 'pie', 'percentage', 'donut'height:300,colors:['purple','#ffa3ef','light-blue'],tooltipOptions:{formatTooltipX:d=>(d +'').toUpperCase(),formatTooltipY:d=> d +' pts',}});

  chart.export();

在这里插入图片描述
在这里插入图片描述
代码：

let heatmap =newfrappe.Chart("#heatmap",{type:'heatmap',title:"Monthly Distribution",data:{dataPoints:{'1524064033':8,/* ... */},// object with timestamp-value pairsstart: startDate
      end: endDate      // Date objects},countLabel:'Level',discreteDomains:0// default: 1colors:['#ebedf0','#c0ddf9','#73b3f3','#3886e1','#17459e'],// Set of five incremental colors,// preferably with a low-saturation color for zero data;// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']});

2，Recharts

在这里插入图片描述

官网链接 ：https://recharts.org/zh-CN/guide

  • 组合 用解耦的、可重用的 React 组件快速构建你的图表。
  • 可靠 依赖于轻量级的 D3 子模块构建 SVG 元素。
  • 强大 调整组件的属性与传递组件自定义你的图表。在这里插入图片描述 代码：
import React,{ PureComponent }from'react';import{ Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer }from'recharts';const data =[{subject:'Math',A:120,B:110,fullMark:150,},{subject:'Chinese',A:98,B:130,fullMark:150,},{subject:'English',A:86,B:130,fullMark:150,},{subject:'Geography',A:99,B:100,fullMark:150,},{subject:'Physics',A:85,B:90,fullMark:150,},{subject:'History',A:65,B:85,fullMark:150,},];exportdefaultclassExampleextendsPureComponent{static demoUrl ='https://codesandbox.io/s/radar-chart-specified-domain-mfl04';render(){return(<ResponsiveContainer width="100%" height="100%"><RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}><PolarGrid /><PolarAngleAxis dataKey="subject"/><PolarRadiusAxis angle={30} domain={[0,150]}/><Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/><Radar name="Lily" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6}/><Legend /></RadarChart></ResponsiveContainer>);}}

在这里插入图片描述

import React,{ PureComponent }from'react';import{ RadialBarChart, RadialBar, Legend, ResponsiveContainer }from'recharts';const data =[{name:'18-24',uv:31.47,pv:2400,fill:'#8884d8',},{name:'25-29',uv:26.69,pv:4567,fill:'#83a6ed',},{name:'30-34',uv:15.69,pv:1398,fill:'#8dd1e1',},{name:'35-39',uv:8.22,pv:9800,fill:'#82ca9d',},{name:'40-49',uv:8.63,pv:3908,fill:'#a4de6c',},{name:'50+',uv:2.63,pv:4800,fill:'#d0ed57',},{name:'unknow',uv:6.67,pv:4800,fill:'#ffc658',},];const style ={top:'50%',right:0,transform:'translate(0, -50%)',lineHeight:'24px',};exportdefaultclassExampleextendsPureComponent{static demoUrl ='https://codesandbox.io/s/simple-radial-bar-chart-qf8fz';render(){return(<ResponsiveContainer width="100%" height="100%"><RadialBarChart cx="50%" cy="50%" innerRadius="10%" outerRadius="80%" barSize={10} data={data}><RadialBar
            minAngle={15}
            label={{position:'insideStart',fill:'#fff'}}
            background
            clockWise
            dataKey="uv"/><Legend iconSize={10} layout="vertical" verticalAlign="middle" wrapperStyle={style}/></RadialBarChart></ResponsiveContainer>);}}

在这里插入图片描述

import React,{ PureComponent }from'react';import{
  ComposedChart,
  Line,
  Area,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  Scatter,
  ResponsiveContainer,}from'recharts';const data =[{name:'Page A',uv:590,pv:800,amt:1400,cnt:490,},{name:'Page B',uv:868,pv:967,amt:1506,cnt:590,},{name:'Page C',uv:1397,pv:1098,amt:989,cnt:350,},{name:'Page D',uv:1480,pv:1200,amt:1228,cnt:480,},{name:'Page E',uv:1520,pv:1108,amt:1100,cnt:460,},{name:'Page F',uv:1400,pv:680,amt:1700,cnt:380,},];exportdefaultclassExampleextendsPureComponent{static demoUrl ='https://codesandbox.io/s/simple-composed-chart-h9zif';render(){return(<ResponsiveContainer width="100%" height="100%"><ComposedChart
          width={500}
          height={400}
          data={data}
          margin={{top:20,right:20,bottom:20,left:20,}}><CartesianGrid stroke="#f5f5f5"/><XAxis dataKey="name" scale="band"/><YAxis /><Tooltip /><Legend /><Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8"/><Bar dataKey="pv" barSize={20} fill="#413ea0"/><Line type="monotone" dataKey="uv" stroke="#ff7300"/><Scatter dataKey="cnt" fill="red"/></ComposedChart></ResponsiveContainer>);}}

3，Protovis

Protovis 是一个可视化 javaScript 图表生成工具。

官网链接：https://mbostock.github.io/protovis/ex/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4，dygraphs

Dygraphs 是一个开源的 JS 库；用于生成可与用户交互的、可缩放的时间图表。主要用于显示密集的数据集合，用户能够很好的浏览和查看数据。

官网链接： https://dygraphs.com/gallery/#g/linear-regression

接下来分享几个图表案例:
在这里插入图片描述

在这里插入图片描述
代码：

newDygraph(
  document.getElementById("baseballdiv"),"suzuki-mariners.txt",{fractions:true,errorBars:true,showRoller:true,rollPeriod:15});

在这里插入图片描述

5，Nivo

官网链接 ：https://nivo.rocks/swarmplot/

Nivo 是一个基于 D3 和 React 的精美的可视化图表框架，提供十四种不同类型的组件来呈现图表数据。

Nivo 提供了许多自定义选项和三个渲染选项：Canvas，SVG，甚至基于 API 的HTML。它的文档非常出色，Demo 可配置且非常有意思。这是一个高级库，使用非常便捷。 接下来分享几个图表案例:

在这里插入图片描述
代码：

/install(please try to align the version of installed @nivo packages)// yarn add @nivo/sunburstimport{ ResponsiveSunburst }from'@nivo/sunburst'// make sure parent container have a defined height when using// responsive component, otherwise height will be 0 and// no chart will be rendered.// website examples showcase many properties,// you'll often use just a few of them.const MyResponsiveSunburst =({ data /* see data tab */})=>(<ResponsiveSunburst
        data={data}
        margin={{top:10,right:10,bottom:10,left:10}}
        id="name"
        value="loc"
        cornerRadius={2}
        borderColor={{theme:'background'}}
        colors={{scheme:'nivo'}}
        childColor={{from:'color',modifiers:[['brighter',0.1]]}}
        enableArcLabels={true}
        arcLabelsSkipAngle={10}
        arcLabelsTextColor={{from:'color',modifiers:[['darker',1.4]]}}/>)

在这里插入图片描述

// install (please try to align the version of installed @nivo packages)// yarn add @nivo/swarmplotimport{ ResponsiveSwarmPlot }from'@nivo/swarmplot'// make sure parent container have a defined height when using// responsive component, otherwise height will be 0 and// no chart will be rendered.// website examples showcase many properties,// you'll often use just a few of them.const MyResponsiveSwarmPlot =({ data /* see data tab */})=>(<ResponsiveSwarmPlot
        data={data}
        groups={['group A','group B','group C']}
        identity="id"
        value="price"
        valueFormat="$.2f"
        valueScale={{type:'linear',min:0,max:500,reverse:false}}
        size={{key:'volume',values:[4,20],sizes:[6,20]}}
        forceStrength={4}
        simulationIterations={100}
        borderColor={{from:'color',modifiers:[['darker',0.6],['opacity',0.5]]}}
        margin={{top:80,right:100,bottom:80,left:100}}
        axisTop={{orient:'top',tickSize:10,tickPadding:5,tickRotation:0,legend:'group if vertical, price if horizontal',legendPosition:'middle',legendOffset:-46}}
        axisRight={{orient:'right',tickSize:10,tickPadding:5,tickRotation:0,legend:'price if vertical, group if horizontal',legendPosition:'middle',legendOffset:76}}
        axisBottom={{orient:'bottom',tickSize:10,tickPadding:5,tickRotation:0,legend:'group if vertical, price if horizontal',legendPosition:'middle',legendOffset:46}}
        axisLeft={{orient:'left',tickSize:10,tickPadding:5,tickRotation:0,legend:'price if vertical, group if horizontal',legendPosition:'middle',legendOffset:-76}}/>)

6，Echarts

在这里插入图片描述
官网链接：https://echarts.apache.org/zh/index.html

在这里插入图片描述

7，AntV

官网链接：https://antv.vision/

数据可视化 AntV 的设计原则是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它在遵循 Ant Design
设计价值观的同时，对数据可视化领域的进一步解读，如色板、字体的指引。

AntV 经过大量的项目实战经验，总结了四条核心原则：准确、清晰、有效、美，这四条原则按重要等级先后排序，相辅相成且呈递进关系。
在这里插入图片描述
它提供了丰富的地理数据统计案例：
在这里插入图片描述

8，Chart.js

官网链接：https://chart.nodejs.cn/

https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html

Chart.js 是一个非常受欢迎的开源库，在 GitHub 上超过 6 万+ star。灵活 且轻量，允许我们使用 HTML5 Canvas 元素构建响应式图表。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，实现非常有意思的功能, 支持 vue 和react。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

9，ApexCharts

官网地址：https://apexcharts.com/vue-chart-demos/

ApexCharts 是一个简洁的 SVG 图表库，附带 Vue 和 React
包装器。它在不同设备上的效果非常丝滑，并提供了详细的文档。ApexCharts 是一个麻省理工学院许可的开源项目，可用于商业和非商业项目。

接下来分享一下它提供的一些图表展示:
在这里插入图片描述

10、D3.js

官网链接 ：https://github.com/xswei/d3js_doc
https://observablehq.com/@d3/gallery

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库。 D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来。 D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。
在这里插入图片描述

在这里插入图片描述

标签： 开源 javascript 开发语言
本文转载自: https://blog.csdn.net/weixin_43025151/article/details/131035420
版权归原作者 hhzz 所有， 如有侵权，请联系我们删除。
登录后发布评论

“制作酷炫可视化大屏利器--分享10种比较流行的开源免费的图表库”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

远程桌面 Rust Desk 自建服务器

git中的gitignore文件

橙单中台化低代码生成器

【实践功能7】前端实现截屏

FileLink内外网文件共享系统与FTP对比：高效、安全的文件传输新选择

Ubuntu22.04 安装图形界面以及XRDP教程

【K8S系列】深入解析 Kubernetes 中的 Deployment

文章导航