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

news2024/12/23 23:28:24

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

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

      • 1，Frappe Charts
      • 2，Recharts
      • 3，Protovis
      • 4，dygraphs
      • 5，Nivo
      • 6，Echarts
      • 7，AntV
      • 8，Chart.js
      • 9，ApexCharts
      • 10、D3.js

在这里插入图片描述

1，Frappe Charts

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

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

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

  // Javascript
  let chart = new frappe.Chart( "#chart", { // or DOM element
    data: {
      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 = new frappe.Chart("#heatmap", {
    type: 'heatmap',
    title: "Monthly Distribution",
    data: {
      dataPoints: {'1524064033': 8, /* ... */},
                        // object with timestamp-value pairs
      start: startDate
      end: endDate      // Date objects
    },
    countLabel: 'Level',
    discreteDomains: 0  // default: 1
    colors: ['#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,
  },
];

export default class Example extends PureComponent {
  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',
};

export default class Example extends PureComponent {
  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,
  },
];

export default class Example extends PureComponent {
  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

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

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

new Dygraph(
  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/sunburst
import { 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/swarmplot
import { 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 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/609538.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Docker快速入门（分分钟钟就能上手）

Docker快速入门（分分钟钟就能上手）

Docker的思想 集装箱&#xff1a;会将所有需要的内容放到不同的集装箱中&#xff0c;谁需要这些环境就直接拿到这个集装箱就可以了。标准化&#xff1a; 运输的标准化&#xff1a;Docker有一个码头&#xff0c;所有上传的集装箱都放在了这个码头上&#xff0c;当谁需要某一个环…
阅读更多...
设计模式-01.设计思想

设计模式-01.设计思想

设计思想 此系列文章非本人原创&#xff0c;是学习笔记。 下面讲一些常见的设计思想 基于接口而非实现编程 这个原则非常重要&#xff0c;是一种非常有效的提高代码质量的手段&#xff0c;在平时的开发中特别经常被用到。 如何解读原则中的“接口”二字&#xff1f; “基于…
阅读更多...
python面向对象操作1（速通版）

python面向对象操作1（速通版）

目录 一、高阶函数 1.lambda函数 2.lambda函数注意事项 3.map用法 4.map和lambda函数配合 二、reduce函数 1.reduce基本应用 2.reduce和匿名函数配合 三、filter()函数 1.简单用法 2.高阶应用 四、列表排列方法&#xff08;key和lambda问题&#xff09; 1.正常排序…
阅读更多...
Node服务器和常见模块

Node服务器和常见模块

1 Node服务器开发 2 fs模块-文件系统 3 event模块-事件处理 4 认识二进制和buffer 5 Buffer的创建方式 6 Buffer的源码解析 node 的fs模块操作&#xff1a; 这里主要讲node如何进行读取文件&#xff0c;操作文件。服务器该有的操作node都有。 node的fs读取文本文件内容的d…
阅读更多...
自定义starter

自定义starter

第一步、创建 xxx-spring-boot-starter 的spring Initializr模块 第二步、删除不需要的内容&#xff08;启动类、除下面spring-boot-starter的其它依赖&#xff0c;maven编译插件&#xff09; <dependency><groupId>org.springframework.boot</groupId><…
阅读更多...
linux理解软硬链接

linux理解软硬链接

软硬连接 在linux下面链接文件有两种&#xff0c;一种是类似window的快捷方式功能的文件&#xff0c;可以让你快速链接到目标文件&#xff08;或目录&#xff09;&#xff0c;叫做软链接&#xff0c;另一种则是通过文件系统的inode链接来产生新的文件名&#xff0c;而不是产生…
阅读更多...
Linux 常用开发工具（yum、vim)

Linux 常用开发工具（yum、vim)

绪论 耐心是一切聪明才智的基础。—— 柏拉图。本章进入到Linux下的一些常用的工具&#xff0c;这些工具能帮助我们去更好的使用Linux操作系统。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 附&#xff1a;红色&#xff0c;部分为重点部分&a…
阅读更多...
[MAUI程序设计] 用Handler实现自定义跨平台控件

[MAUI程序设计] 用Handler实现自定义跨平台控件

文章目录 Handler与Xamarin.Forms实现的区别为什么要用Handler代替Renderer解耦生命周期管理更细粒度的控制 用Effect来实现呢&#xff1f;自定义手势监听控件在各平台上实现TouchRecognizeriOS中的实现Android中的实现Windows中的实现 创建控件使用控件最终效果项目地址 今天来…
阅读更多...
使用 Kubeadm 和 CRI-O 在 Rocky Linux 8 上安装 Kubernetes 集群

使用 Kubeadm 和 CRI-O 在 Rocky Linux 8 上安装 Kubernetes 集群

在 Rocky Linux 8 上安装 Kubernetes 集群。毫无疑问&#xff0c;Kubernetes 将继续改变我们大规模部署和管理业务应用程序的方式。无论用于部署应用程序的模型是手动还是通过 CI/CD 管道&#xff0c;Kubernetes 仍然是处理编排、管理和扩展应用程序的最佳选择。 对于那些不知…
阅读更多...
一劳永逸的方法解决函数scanf报错问题

一劳永逸的方法解决函数scanf报错问题

目录 scanf报错示例 代码 报错提醒 报错翻译 解决方案1&#xff08;不建议&#xff09;:将scanf换成scanf_s&#xff1b; 解决方案2&#xff08;临时解决&#xff09;&#xff1a; 解决方案3&#xff08;建议&#xff09;&#xff1a; 方法1&#xff08;建议&#xff09…
阅读更多...
javaScript蓝桥杯----资讯接口

javaScript蓝桥杯----资讯接口

目录 一、介绍二、准备三、目标四、代码五、知识点1.res.end()2.res.end与res.send 六、完成 一、介绍 随着技术的发展&#xff0c;很多前端工程师已经不满足于只做诸如页面布局和交互这些开发工作了&#xff0c;很多人将目光逐渐转向了“大前端”范围&#xff0c;其中就包括不…
阅读更多...
Vim学习笔记【Ch03】

Vim学习笔记【Ch03】

Vim学习笔记 系列笔记链接Ch03 Searching FilesVim中打开和编辑文件用Find进行文件搜索用grep进行文件内搜索:vim搜索:grep搜索 通过Netrw浏览文件Fzffzf和ripgrep安装fzf配置fzf语法查找文件在文件内部查找用Rg代替Grep在多个文件中搜索和替换 小结 系列笔记链接 Ch00&#x…
阅读更多...
【论文速览】根据人脑fMRI信号重建图像 Image Reconstruction from human brain activity

【论文速览】根据人脑fMRI信号重建图像 Image Reconstruction from human brain activity

文章目录 前言文章一研究背景主要方法部分实验结果总结与思考参考资料 文章二研究背景主要方法部分实验结果总结与思考 前言 人类的视觉神经系统对于真实世界的视觉刺激有着非凡的感知与理解能力&#xff0c;比如我们能够准确地识别物体距离和三维几何关系等&#xff0c;这是当…
阅读更多...
2023/6/4总结

2023/6/4总结

CSS的学习&#xff1a; 2023-06-01 19-57-46-649 移动开发流式布局&#xff1a; 流式布局&#xff0c;是根据百分比布局&#xff0c;因为手机的尺寸会不一样&#xff0c;所以利用百分比布局可以很好的解决缩放以及尺寸问题&#xff1a; 这是跟着视频做的一个案例&#xff1a;…
阅读更多...
Lecture 8 Deep Learning for NLP: Recurrent Networks

Lecture 8 Deep Learning for NLP: Recurrent Networks

目录 Problem of N-gram Language Model N-gram 语言模型的问题Recurrent Neural Network(RNN) 循环神经网络RNN Language Model: RNN 语言模型Long Short-Term Memory Model (LSTM) 长短期记忆模型&#xff08;LSTM&#xff09;Gating Vector 门向量Forget Gate 忘记门Input G…
阅读更多...
ChatGPT 使用 拓展资料:大模型时代的开发者新机遇

ChatGPT 使用 拓展资料:大模型时代的开发者新机遇

ChatGPT 使用 拓展资料:大模型时代的开发者新机遇
阅读更多...
Nginx-rewrite模块详细介绍

Nginx-rewrite模块详细介绍

Nginx-rewrite模块 前言一、Nginx-rewrite模块概述1、rewrite场景2、rewrite实现3、rewrite执行顺序4、语法格式 二、rewrite示例1、基于域名的跳转2、基于客户端IP访问跳转3、基于旧域名跳转到新域名后面加目录4、基于参数匹配的跳转5、基于目录下所有 php 结尾的文件跳转6、基…
阅读更多...
代码报错 | 出bug--＞该如何调试？

代码报错 | 出bug--＞该如何调试？

代码报错 | 出bug-->该如何调试&#xff1f; 什么叫做bug调试是什么&#xff1f;有多重要&#xff1f;Debug和Release的介绍调试常用的快捷键调试时查看程序当前的信息 如何写出好&#xff08;易于调试&#xff09;的代码对const的通俗生活中举例assert的理解 编译常见的错误…
阅读更多...
Java程序员面试经验总结

Java程序员面试经验总结

目录 一、企业是如何筛选简历的1.简历筛选流程2.HR如何筛选简历3.部门负责人筛选简历4.总结-简历筛选规则 二、简历注意事项1.简历整体结构2.职业技能3.项目经历4.总结 三、应届毕业生改如何找到合适的练手项目1.项目来源2.如何深入学习项目3.应该学习哪些模块4.模块该如何吃透…
阅读更多...
【owt】WebrtcNode, subscribe-sdp offer 流程(1)

【owt】WebrtcNode, subscribe-sdp offer 流程(1)

sdp offer 流程 1. AmqpClient - New message received sdp offer 的消息 2023-04-26T21:54:19.790 - DEBUG: AmqpClient - RpcServer New message received {method: onTransportSignaling,args: [b149e44bb10d4e91bd162a8c6806ae7b,{sdp: v0\r\n o- 7177131362423164715 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023