摘要:概述是一個圖表庫,使用元素來展示各式各樣的客戶端圖表,支持折線圖柱形圖雷達圖餅圖環形圖等。比較輕量版本僅,且不依賴其他庫。附上解決思路是每次切換時移除舊的畫布并新建畫布,代碼如下外的容器節點
概述
Chart.js是一個HTML5圖表庫,使用canvas元素來展示各式各樣的客戶端圖表,支持折線圖、柱形圖、雷達圖、餅圖、環形圖等。在每種圖表中,還包含了大量的自定義選項,包括動畫展示形式。 Chart.js比較輕量(gzip版本僅4.5k),且不依賴其他庫。
Chart.js官網: http://www.chartjs.org/
npm:npm install chart.js --save
Bower:bower install chart.js --save
CDN:https://cdnjs.com/libraries/Chart.js
ES6:
import Chart from "chart.js"; let myChart = new Chart(ctx, {...});
Script Tag:
Common JS:
var Chart = require("chart.js"); var myChart = new Chart(ctx, {...});
Require JS:
require(["path/to/chartjs/dist/Chart.js"], function(Chart){ var myChart = new Chart(ctx, {...}); });第三步: 使用
在線查看鏈接:https://codepen.io/lilywang/f...
配置介紹new Chart(ctx, { type: "MyType", data: data, options: options });type
["line","bar", "radar", "polarArea", "doughnut", "pie", "bubble"]
data、options由于圖表type不同,data的配置也就不同,這里以折線圖的使用方法舉例:
var myLineChart = new Chart(ctx, { type: "line", data: { labels: "red", backgroundColor: "blue",//填充色 borderColor: "green",//曲線邊框色, borderWidth: 2,//曲線的寬度 borderDash: [2, 3], fill: true, // pointBackgroundColor: "purple",//數據點的填充色 pointBorderColor: "blue",//數據點邊框顏色 pointBorderWidth: 2,//數據點邊框的寬度 pointRadius: 2, //數據點的大小 pointStyle:"circle",//"cross""crossRot""dash""line""rect""rectRounded""rectRot""star""triangle" showLine: true, //如果為false,兩數據點之間的線不會渲染 spanGaps: true, //如果為false,NaN data會在折線上有斷點 steppedLine: true,//可選值[false, true, "before", "after"],為true,折線圖的曲線會成直角, //將要在圖上展示的數據,數組中的每一個object代表一條線 datasets: [{ // 顏色的使用類似于CSS,你也可以使用RGB、HEX或者HSL // rgba顏色中最后一個值代表透明度 // 填充顏色 fillColor : "rgba(220,220,220,0.5)", // 線的顏色 strokeColor : "rgba(220,220,220,1)", // 點的填充顏色 pointColor : "rgba(220,220,220,1)", // 點的邊線顏色 pointStrokeColor : "#fff", // 與x軸標示對應的數據 data : [65,59,90,81,56,55,40] },{ fillColor : "rgba(151,187,205,0)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] }] } options: { responsive: true,//圖表是否響應式 //圖表標題相關配置 title: { display: true, text: "狀態歷史圖", fontFamily: "Helvetica", padding: 20, fontSize: 16, lineHeight: 1.2, }, //圖例 legend: { display: false, }, tooltips: { titleFontFamily: "Helvetica Neue", titleFontSize: 14, yPadding: 14, xPadding: 8, bodyFontSize: 14, titleMarginBottom: 10, position: "nearest",//tooltips就近顯示 callbacks: { //可自定義tooltips上顯示的文字 label(tooltipItem, data) { return `狀態: ${tooltipItem.yLabel === 0 ? "離線" : "在線"}`; } } }, //坐標軸 scales: { scaleLabel: { display: true, labelString: "狀態" }, ticks: { fontSize: 18, fontColor: "red", }, //y軸配置 yAxes: [{ type: "linear", labels: [0,1],//y軸上的顯示的數據 beginAtZero: true,//是否從零開始 //軸文字控制 ticks: { //可自定義y軸顯示上顯示的文字 callback(value, index, values) { return value === 0 ? "離線" : "在線" }, min: 0,//最小值,記得軸的type要為linear max: 1,//最大值,記得軸的type要為linear stepSize: 1,//數字之間的間隔,設置之后例如: [2,3,4] } }], //x軸配置 xAxes: [{ type: "category", labels: dateList, distribution: "linear" }] }, //整個圖表配置 layout: { //設置圖表的padding值 padding: { left: 50, right: 0, top: 20, bottom: 0 } } } });
還有其它類型的圖表配置就不一一贅述了,使用方式都大同小異。
使用中遇到過的問題在切換時間重新渲染圖表時遇到,當切換到昨天,鼠標hover圖表時,圖表上折線會出現今天的折線,猜測原因是在切換tab的時候上一個Chart實例還存在,導致沖突出現這個問題。附上解決思路是:每次切換tab時移除舊的canvas畫布并新建畫布,代碼如下:
resetCanvas() { let html = "
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90242.html
摘要:使用來呈現圖表。允許用戶在應用程序中創建美觀的可復用的圖表。它是基于創建的,是一個以數據為中心的圖表庫,可以改進數據可視化的效果。非常輕巧,并使用元素來創建很奇特的圖表。是庫中較為古老的圖表庫之一。總結以上介紹的庫都是高質量的圖表庫。 當前,數據可視化已經成為數據科學領域非常重要的一部分。不同網絡系統中產生的數據,都需要經過適當的可視化處理,以便更好的呈現給用戶讀取和分析。 對任何一個...
摘要:但是大多數開箱即用的解決方案用默認的選項并不能做出很絢麗的圖表。這篇文章中,我會教你如何自定義選項來制作很酷的圖表。我們使用來作為的打包器。代碼中,使用了一些實例數據和可選參數傳遞給的數據對象,并且設置,使得圖表會充滿外層容器。 showImg(https://segmentfault.com/img/remote/1460000009049816?w=1000&h=424); 本文...
摘要:最近兼職的項目里面因為要用進行數據的交互式可視化,用比較多,也踩了不少坑。內部用這個進行之類的時,先深拷貝然后再擴展,比較方便。可以看出直接給原型進行擴展,寫起來非常簡潔。 最近兼職的項目里面因為要用charts進行數據的交互式可視化,用Chart.js比較多,也踩了不少坑。為了改bug提pr外加學習一下提高姿勢水平花了一點時間看了下源碼,發現一些比較有用簡介的helper funct...
摘要:它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計,提供一系列高度可配置的圖表。 現在有很多圖表庫,但哪一個最好用?這可能取決于許多因素,如業務需求,數據類型,圖表本身的目的等等。在本文中,每個JavaScript圖表庫將與一些關鍵...
摘要:它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計,提供一系列高度可配置的圖表。 現在有很多圖表庫,但哪一個最好用?這可能取決于許多因素,如業務需求,數據類型,圖表本身的目的等等。在本文中,每個JavaScript圖表庫將與一些關鍵...
閱讀 3593·2021-11-23 09:51
閱讀 2795·2021-11-23 09:51
閱讀 676·2021-10-11 10:59
閱讀 1672·2021-09-08 10:43
閱讀 3223·2021-09-08 09:36
閱讀 3289·2021-09-03 10:30
閱讀 3293·2021-08-21 14:08
閱讀 2195·2021-08-05 09:59