作为开发人员，了解和掌握图表库将能起到巨大作用：不但可以大大提高效率、节省时间，还可以通过各种图表类型和样式选项来满足各种不同的开发需求。
本文将介绍七个超级好用的图表库。一起来看看吧！
图片
Latitude 是一款用于嵌入式分析的开源框架，能够快速将 SQL 查询公开为 API 端点。
产品包括@latitude-data/react，这是一组原生 React 组件，可用于轻松绘制来自 Latitude API 的数据。如果你选择自带数据，Latitude也可以用作独立的图表库。
首先，在 React 项目中安装 Latitude 的react包：
npm install --save @latitude-data/react接着，导入用于Latitude组件的核心样式：
import '@latitude-data/react/dist/index.css';如果要从 Latitude 后端获取数据，可以使用项目根目录的LatitudeProvider包装应用程序：
import { LatitudeProvider } from '@latitude-data/react';function App() { return ( <LatitudeProviderapiCnotallow={{ host: <YOUR_LATITUDE_API_HOST> }}> {/* Your app content */} </LatitudeProvider>);}再以Query为前缀使用 Latitude 的图表组件：
import { QueryLineChart } from '@latitude-data/react';function MyComponent() { return ( <QueryLineChart queryPath='titles' params={{ start_year: 2012, end_year: 2014 }} x='release_year'y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} xTitle='Year' yTitle='Titles'/> );}在上面的示例中，queryPath对应于 Latitude 后端中定义的查询路径。
可以像这样使用独立组件：
import { LineChart } from '@latitude-data/react';function MyComponent() { const data = [ { release_year: 2010, count_shows: 10, count_movies: 2 } ] return ( <LineChart data={data} x='release_year' y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} /> );}觉得意犹未尽，还可以阅读文档获取有关 Latitude 动态显示数据的加强版指南。
图片
D3 虽然是低级图表库，但它提供了无与伦比的自定义和灵活性。
相比那些学习难度大的通用前端框架，如 React 和 Svelte，如果是一些特定的图表需求，那么d3.js可能是更佳的选择。当然，如果应用程序需要快速集成简单图表，那么更推荐使用其他的图表库。
在项目中安装 d3 的npm包：
npm install d3以下示例代码表示通过id #chart将图表添加到html组件：
import * as d3 from 'd3';// Data for the bar chartconst data = [ { name: 'A', value: 30 }, { name: 'B', value: 80 }, { name: 'C', value: 45 }, { name: 'D', value: 60 }, { name: 'E', value: 20 }, { name: 'F', value: 90 }, { name: 'G', value: 55 }];// Set the dimensions and margins of the graphconst margin = { top: 20, right: 30, bottom: 40, left: 40 };const width = 500 - margin.left - margin.right;const height = 300 - margin.top - margin.bottom;// Append the svg object to the body of the pageconst svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`);// X axisconst x = d3.scaleBand() .range([0, width]) .domain(data.map(d => d.name)) .padding(0.1);svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("class", "axis-label") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end");// Y axisconst y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0]);svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .attr("class", "axis-label");// Barssvg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.value));如你所见，D3.js 通常比其他替代方法更冗长，但也因此可以最大限度地控制可视化的各个方面。
D3 的免费和开源也是一大亮点。
图片
Chart.js目前是最受欢迎的图表库之一，也是最容易使用的图表库之一。与一些仅将数据呈现为 SVG 的图表库不同，Chart.js通过 Canvas 进行视觉渲染。
Chartjs 可以通过npm安装，也可以在运行时通过cdn直接下载：
<div> <canvas id="myChart"></canvas></div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });</script>这个项目是不是很酷呢！
图片
ECharts 是一个开源的数据可视化库，这段时间越来越受到大家的喜爱和欢迎。它由 Apache foundation 构建，依靠 ZRender 来渲染图形。
与其他库相比，ECharts更复杂；并且ECharts只渲染动态数据。
使用npm安装 echarts：
npm install echarts以下代码片段通过 id #chart在 DOM 元素中创建了一个简单的条形图：
// Import EChartsimport * as echarts from 'echarts';// Initialize the chartvar chartDom = document.getElementById('chart');var myChart = echarts.init(chartDom);var option;// Specify the chart configurationoption = { title: { text: 'Simple Bar Chart' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: {}, series: [ { name: 'Value', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ]};// Use the specified chart configurationoption && myChart.setOption(option);很有趣的一个项目，不是吗？
图片
Nivo 是一个专为 React 而设计、用于创建数据可视化的高级开源 JavaScript 库。它建立在 D3 的基础上，提供广泛的图表类型，自带内置主题、交互性和响应式设计。
React 开发人员使用 Nivo 简直轻而易举。安装 nivo 核心软件包以及相关图表库。在下面的示例中，我们将实现一个条形图：
yarn add @nivo/core @nivo/bar然后，导入相关的图表组件并在 React 环境中使用：
import { Bar } from '@nivo/bar';const MyBarChart = () => {const salesData = [ { "category": "Electronics", "value": 5000 }, { "category": "Clothing", "value": 3000 }, { "category": "Furniture", "value": 2500 }]; return ( <Bar data={salesData} indexBy="category" maxValue={6000} keyBy="id"/> );};export default App;重复强调一句，Nivo 是开源的，非常棒！
图片
Plotly 是开源的数据可视化库，支持多种图表类型和交互式功能。可用于包括 Python、R 和 JavaScript在内的多种编程语言。
Plotly.js 是 Plotly 的 JavaScript 版本，建立在 D3 之上，广泛用于创建基于 web 的交互式可视化。
如前所述，Plotly 可以使用多种编程语言，这里仅以 Javascript 为例。
首先，安装相关npm包：
npm install plotly.js-dist然后，在html中创建一个空的div元素来绘制图形：
<div id="tester" style="width:600px;height:250px;"></div>最后，输入以下代码来绘制一个简单的折线图：
const TESTER = document.getElementById('tester');Plotly.newPlot( TESTER, [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }], { margin: { t: 0 } } );Plotly 真的是一个非常好用的工具，对吧！
Victory 是一个用于 React 和 React Native 的开源模块化图表库。它有一个简单优雅的 API，可用于创建各种数据可视化。
与 Nivo 类似，Victory 利用了 React 的优势，因此成为许多熟悉 React 生态系统的开发人员的天然选择。
首先，安装npm包：
npm install victory然后，根据需要导入要使用的相关组件。例如：
import React from 'react';import { VictoryBar } from 'victory';const data = [ {quarter: 1, earnings: 13000}, {quarter: 2, earnings: 16500}, {quarter: 3, earnings: 14250}, {quarter: 4, earnings: 19000}]function App() { return ( <VictoryBar data={data} // data accessor for x values x="quarter" // data accessor for y values y="earnings" />}如果你觉得 Victory 很酷，那么一定要尝试一下。
恭喜！你又学完了今天的新知识！
在本文中，我们介绍了 2024 年值得探索的 7 个图表库。并且，我们不仅仅是简单地概述了一下哦，还具体介绍了每个库的工作原理、底层架构以及构建技术。此外，我们还通过示例学习了如何将这些库合用于项目中。
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-91373-0.html2024 年面向前端开发的七个最佳图表库
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
