資訊專欄INFORMATION COLUMN
摘要：使用小結官方文檔英文文檔中文文檔在中的使用開始使用在相應的頁面中引入先寫一個小的作圖動態更新的數據作圖更新數據
Chart.js使用小結 官方文檔
英文文檔 https://www.chartjs.org/docs/...在react中的使用 開始使用中文文檔 https://chartjs-doc.abingoal.com
npm install chart.js --save
在相應的頁面中引入 chartjs
import Chart from "chart.js"
先寫一個小的demo
import React from "react";
import ReactDOM from "react-dom";
import Chart from "chart.js";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.renderCanvas()
}
// 作圖
renderCanvas = () => {
const myChartRef = this.chartRef.getContext("2d");
new Chart(myChartRef, {
type: "line",
data: {
labels: [1,2,3,4,5],
datasets: [
{
data: [10, 20, 50, 80, 100],
backgroundColor: "rgba(71, 157, 255, 0.08)",
borderColor: "rgba(0, 119, 255, 1)",
pointBackgroundColor: "rgba(56, 96, 244, 1)",
pointBorderColor: "rgba(255, 255, 255, 1)",
pointRadius: 4
}
]
},
options: {
responsive: true,
legend: {
display: false
},
maintainAspectRatio: false
}
});
};
render() {
return (
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(
https://codesandbox.io/embed/...動態更新的數據
import React from "react";
import ReactDOM from "react-dom";
import Chart from "chart.js";
let currentChart;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [30, 60, 90, 120, 100]
};
}
componentDidMount() {
this.renderCanvas();
this.renderCurrent();
}
// 作圖
renderCanvas = () => {
const myChartRef = this.chartRef.getContext("2d");
new Chart(myChartRef, {
type: "line",
data: {
labels: [1, 2, 3, 4, 5],
datasets: [
{
data: [10, 20, 50, 80, 100],
backgroundColor: "rgba(71, 157, 255, 0.08)",
borderColor: "rgba(0, 119, 255, 1)",
pointBackgroundColor: "rgba(56, 96, 244, 1)",
pointBorderColor: "rgba(255, 255, 255, 1)",
pointRadius: 4
}
]
},
options: {
responsive: true,
legend: {
display: false
},
maintainAspectRatio: false
}
});
};
renderCurrent = () => {
const { data } = this.state;
const currentCharttemp = this.currentChart.getContext("2d");
if (typeof currentChart !== "undefined") {
currentChart.destroy();
}
currentChart = new Chart(currentCharttemp, {
type: "line",
data: {
labels: [1, 2, 3, 4, 5],
datasets: [
{
data: data,
backgroundColor: "rgba(71, 157, 255, 0.08)",
borderColor: "rgba(0, 119, 255, 1)",
pointBackgroundColor: "rgba(56, 96, 244, 1)",
pointBorderColor: "rgba(255, 255, 255, 1)",
pointRadius: 4
}
]
},
options: {
responsive: true,
legend: {
display: false
},
maintainAspectRatio: false
}
});
};
render() {
return (
);
}
}
https://blog.bitsrc.io/custom...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106551.html
摘要：最近兼職的項目里面因為要用進行數據的交互式可視化，用比較多，也踩了不少坑。內部用這個進行之類的時，先深拷貝然后再擴展，比較方便。可以看出直接給原型進行擴展，寫起來非常簡潔。 最近兼職的項目里面因為要用charts進行數據的交互式可視化，用Chart.js比較多，也踩了不少坑。為了改bug提pr外加學習一下提高姿勢水平花了一點時間看了下源碼，發現一些比較有用簡介的helper funct...
摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對于新特性，我們可以通過使用，也可以通過語法轉化來達到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復雜的歷史和時代的原因，并不加以累述。而解決兼容性問題的方法在以前只...
摘要：概述是一個圖表庫，使用元素來展示各式各樣的客戶端圖表，支持折線圖柱形圖雷達圖餅圖環形圖等。比較輕量版本僅，且不依賴其他庫。附上解決思路是每次切換時移除舊的畫布并新建畫布，代碼如下外的容器節點 概述 Chart.js是一個HTML5圖表庫，使用canvas元素來展示各式各樣的客戶端圖表，支持折線圖、柱形圖、雷達圖、餅圖、環形圖等。在每種圖表中，還包含了大量的自定義選項，包括動畫展示形式。...
摘要：高亮最近的元素高亮同樣值的數據高亮所有的數據原色，當鼠標懸浮到塊是值被選中。關鍵字代表的是從構造函數創建的對象。高亮最近的數據懸浮時動畫執行的時間，單位，毫秒調用被觸發的任何事件動畫設置以下動畫設置都可生效，全局設置在中定義。 chart.js Configuration文檔翻譯 tags: chart 文檔 翻譯 [TOC] Getting start開始 下載 github上獲得最...
閱讀 1506·2021-11-25 09:43
閱讀 4057·2021-11-15 11:37
閱讀 3192·2021-08-17 10:13
閱讀 3503·2019-08-30 14:16
閱讀 3534·2019-08-26 18:37
閱讀 2487·2019-08-26 11:56
閱讀 1128·2019-08-26 10:42
閱讀 609·2019-08-26 10:39
