官方承諾：K60至尊版將會首批升級MIUI 15
全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
作為開發人員，了解和掌握圖表庫將能起到巨大作用：不但可以大大提高效率、節省時間，還可以通過各種圖表類型和樣式選項來滿足各種不同的開發需求。
本文將介紹七個超級好用的圖表庫。一起來看看吧！
圖片
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 個圖表庫。并且，我們不僅僅是簡單地概述了一下哦，還具體介紹了每個庫的工作原理、底層架構以及構建技術。此外，我們還通過示例學習了如何將這些庫合用于項目中。
本文鏈接：http://m.www897cc.com/showinfo-26-91373-0.html2024 年面向前端開發的七個最佳圖表庫
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號