在開發(fā)可視化項目的過程中往往涉及到可視化圖表, 多酷炫的報表, 大屏, 都用了非常多的圖表,
接下來我和大家分享一些比較流行的開源免費的圖表庫.

1，F(xiàn)rappe Charts

Frappe Charts - 免費開源、輕量無依賴的 web 圖表庫，簡單不臃腫，支持搭配 Vue / React 等框架使用，一個小巧簡單的 JavaScript 圖表庫，通過簡單幾個參數(shù)，可以快速生成類似于 Github 那樣美觀大氣的圖表。

官網(wǎng)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

官網(wǎng)鏈接 ：https://recharts.org/zh-CN/guide

• 組合
  用解耦的、可重用的 React 組件快速構(gòu)建你的圖表。

• 可靠
  依賴于輕量級的 D3 子模塊構(gòu)建 SVG 元素。

• 強(qiáng)大
  調(diào)整組件的屬性與傳遞組件自定義你的圖表。
  
  代碼：

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 圖表生成工具。

官網(wǎng)鏈接：https://mbostock.github.io/protovis/ex/

4，dygraphs

Dygraphs 是一個開源的 JS 庫；用于生成可與用戶交互的、可縮放的時間圖表。主要用于顯示密集的數(shù)據(jù)集合，用戶能夠很好的瀏覽和查看數(shù)據(jù)。

官網(wǎng)鏈接： 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

官網(wǎng)鏈接 ：https://nivo.rocks/swarmplot/

Nivo 是一個基于 D3 和 React 的精美的可視化圖表框架，提供十四種不同類型的組件來呈現(xiàn)圖表數(shù)據(jù)。

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

官網(wǎng)鏈接：https://echarts.apache.org/zh/index.html

7，AntV

官網(wǎng)鏈接：https://antv.vision/

數(shù)據(jù)可視化 AntV 的設(shè)計原則是基于 Ant Design 設(shè)計體系衍生的，具有數(shù)據(jù)可視化特性的指導(dǎo)原則。它在遵循 Ant Design
設(shè)計價值觀的同時，對數(shù)據(jù)可視化領(lǐng)域的進(jìn)一步解讀，如色板、字體的指引。

AntV 經(jīng)過大量的項目實戰(zhàn)經(jīng)驗，總結(jié)了四條核心原則：準(zhǔn)確、清晰、有效、美，這四條原則按重要等級先后排序，相輔相成且呈遞進(jìn)關(guān)系。

它提供了豐富的地理數(shù)據(jù)統(tǒng)計案例：

8，Chart.js

官網(wǎng)鏈接：https://chart.nodejs.cn/

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

Chart.js 是一個非常受歡迎的開源庫，在 GitHub 上超過 6 萬+ star。靈活 且輕量，允許我們使用 HTML5 Canvas 元素構(gòu)建響應(yīng)式圖表?？梢暂p松地對折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，實現(xiàn)非常有意思的功能, 支持 vue 和react。

9，ApexCharts

官網(wǎng)地址：https://apexcharts.com/vue-chart-demos/

ApexCharts 是一個簡潔的 SVG 圖表庫，附帶 Vue 和 React
包裝器。它在不同設(shè)備上的效果非常絲滑，并提供了詳細(xì)的文檔。ApexCharts 是一個麻省理工學(xué)院許可的開源項目，可用于商業(yè)和非商業(yè)項目。

接下來分享一下它提供的一些圖表展示:

10、D3.js

官網(wǎng)鏈接 ：https://github.com/xswei/d3js_doc
https://observablehq.com/@d3/gallery

D3 (或者叫 D3.js )是一個基于 web 標(biāo)準(zhǔn)的 JavaScript 可視化庫。 D3 可以借助 SVG, Canvas 以及HTML 將你的數(shù)據(jù)生動的展現(xiàn)出來。 D3 結(jié)合了強(qiáng)大的可視化交互技術(shù)以及數(shù)據(jù)驅(qū)動 DOM 的技術(shù)，讓你可以借助于現(xiàn)代瀏覽器的強(qiáng)大功能自由的對數(shù)據(jù)進(jìn)行可視化。

文章來源地址http://www.zghlxwxcb.cn/news/detail-719055.html

到了這里，關(guān)于制作酷炫可視化大屏利器--分享10種比較流行的開源免費的圖表庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！