幻想，響應式圖表。

數據都在我們周圍。儘管搜索引擎和其他應用程序與基於文本的數據表示最佳作用，但人們發現在視覺上表示的數據很容易理解。今年早些時候，SitePoint發表了Aurelio的文章，介紹了Chart.js的介紹。本教程將對介紹進行快速回顧，然後更深入地查看圖表的功能。

鑰匙要點

Chart.js是一個基於HTML5帆布的響應式，輕巧的圖表庫，支持六種不同的圖表類型，每個圖表都有許多自定義選項。它是模塊化的，允許開發人員僅包括所需的圖表類型，使文件大小保持最小。 >
• 庫允許對圖表進行廣泛的自定義，包括工具提示，動畫，甚至創建自定義圖表類型。這同時包括全局設置和特定圖表的選項，並且能夠通過將響應式配置選項設置為true來使圖表響應。
>
• Chart.js還支持動態添加和刪除數據，使其成為數據隨時間變化（例如股票市場表示形式）的理想選擇。這可以通過刪除（）和adddata（valuesarray，label）之類的方法來實現，也可以通過直接設置圖表中的值。
。
入門

>圖表中的所有六個核心圖表類型都僅為11KB，並且gzip’d且庫是模塊化的，因此您只能通過包括實際需要的圖表類型來進一步降低文件的請求大小。以下是CDNJS鏈接，包括：>

可用配置選項

Chart.js允許您更改圖表的幾乎每個方面 - 從工具提示到動畫。在本節中，我將修改一些設置，以說明Chart.js能夠創建哪些圖表。這是我們將從以下內容開始的HTML。

<span><script></script></span>

>對於第一次演示，我將創建一個線圖。您需要設置一些基本選項，以使圖表有意義。該行圖期望一系列標籤和數據集。標籤出現在X軸上。我已經用一些虛擬數據填充了線圖。數據分解為數據集。每個數據集都有填充，線和點的顏色。

> 在這種情況下，我將填充物設置為透明。如果您不設置填充物值，則將其設置為黑色或灰色。其他值也是如此。使用RGBA，RGB，HEX或HSL格式定義顏色，類似於CSS。

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

設置全局選項

>我包含了設置一些全局值的代碼。 AnimationSteps確定動畫持續時間。您還有更多的選擇可以根據自己的需求進行修改，例如ScalelineColor和ScaleIntegerson。我建議您瀏覽圖表。

<span><canvas id="canvas"></canvas></span>

設置圖表特定選項

>除了全局選項外，還有用於單個圖表類型的配置選項。我將在此行圖中設置其中一些選項，以使您有一個想法：

圖表生成的圖表

>默認情況下不會響應。設置敏感的真實（如上所​​述）使它們響應迅速。如果您需要對每個圖表進行響應，我建議您在全球範圍內設置此圖表，例如：：

<span>var lineData = {
</span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
</span>           <span>'Data 5', 'Data 6', 'Data 7'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(220,180,0,1)',
</span>    <span>pointColor: 'rgba(220,180,0,1)',
</span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
</span>  <span>}, {
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(151,187,205,1)',
</span>    <span>pointColor: 'rgba(151,187,205,1)',
</span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
</span>  <span>}]
</span><span>}</span>

>下面您可以看到線圖的演示：

<span>Chart.defaults.global = {
</span>  <span>animationSteps : 50,
</span>  <span>tooltipYPadding : 16,
</span>  <span>tooltipCornerRadius : 0,
</span>  <span>tooltipTitleFontStyle : 'normal',
</span>  <span>tooltipFillColor : 'rgba(0,160,0,0.8)',
</span>  <span>animationEasing : 'easeOutBounce',
</span>  <span>scaleLineColor : 'black',
</span>  <span>scaleFontSize : 16
</span><span>}</span>

請參閱codepen上的sitepoint（@sitepoint）的筆圖表。

動態添加和刪除數據

>有時您需要顯示隨時間變化的數據。這種情況的一個經典例子是股票市場。在本節中，我將創建一個條形圖並動態刪除以及向其添加數據。在這種情況下，我將使用一些隨機數據，並決定用條形圖表示數據。此示例中的大多數代碼將類似於上一個示例。一旦擁有HTML（與上一個示例相同），我們可以添加JavaScript。

首先，我們將編寫代碼以使用虛擬數據填充圖表。我使用函數表達式生成隨機值，然後將其存儲在變量DDATA中。然後，這些值可在需要時為我們提供隨機數據。與上一個示例一樣，我創建了一個標籤和數據集數組，並設置了一個任意的填充物。

現在是時候編寫刪除並將條添加到我們的圖表的代碼了。我首先以11的值初始化索引變量。我使用兩種方法：remaveAta（）和adddata（valuesarray，label）。在圖表實例上調用removedata（）刪除該特定圖表上所有數據集的第一個值。如果Barchartdemo，則刪除數據集的第一個值。調用AddData（）傳遞一個值和標籤的數組，在圖表末尾添加了一個新數據點。下面的代碼段一次每3秒更新圖表。

>在圖表中更新值的另一種方法是直接設置值。在下面的示例中，第一行將第一個數據集的第二個欄的值設置為60。如果此時調用更新，則該欄將從當前值中啟動到60。 >

<span>var ctx = document.getElementById('canvas').getContext('2d');
</span><span>var lineDemo = new Chart(ctx).<span>Line</span>(lineData, {
</span>  <span>responsive: true,
</span>  <span>pointDotRadius: 10,
</span>  <span>bezierCurve: false,
</span>  <span>scaleShowVerticalLines: false,
</span>  <span>scaleGridLineColor: 'black'
</span><span>});</span>

這是條形圖演示：

請參閱codepen上的sitepoint（@sitepoint）的筆圖表。

結論

>本教程介紹了Chart.js的一些重要功能。第一個示例證明了使用一些全局設置。但是，Chart.js還提供了特定於圖表類型的自定義選項。如果圖表已經可用，則該庫允許您創建自己的圖表類型。我建議您仔細閱讀文檔，以便您可以很好地掌握您可以使用此圖書館的內容。

經常詢問的問題（常見問題解答）關於帶有圖表的精美響應圖。

>如何使我的Chart.js圖表​​完全響應？

>使您的Chart.js圖表​​完全響應措施涉及將響應式配置選項設置為true。這允許當窗口大小更改時圖表大小。您可以通過將以下代碼添加到圖表配置中來做到這一點：

var mychart = new Chart（CTX，{
type：'bar'，
data：data，data，
選項： {
響應：true
}
}）;
此代碼將確保您的圖表在窗口大小變化時會調整其大小，以確保完全響應Design 。

為什麼我的Chart.js圖表​​無法正確調整大小？

如果您的Chart.js圖表​​未正確調整大小，則可能是由於一些原因所致。一個常見的問題是，包含圖表的帆布元素無法正確調整大小。確保帆布元件具有相對位置，寬度和高度為100％。另一個問題可能是圖表配置中的響應式選項未設置為true。檢查您的圖表配置以確保正確設置響應選項。

>如何自定義圖表的外觀。圖表的外觀。您可以自定義顏色，標籤，工具提示等。例如，要在條形圖中自定義條形的顏色，您可以使用以下代碼：

var mychart = new Chart（CTX，{

type：'bar'，

data ： {

>數據集：[{
backgroundColor：'rgba（75，192，192，0.2）'
}]
}
}）;
此代碼將條形的背景顏色設置為淺藍色。您可以使用類似的選項自定義圖表外觀的許多其他方面。

>如何將工具提示添加到我的Chart.js Chart？

>
tooltips in Chart.js中的tooltips默認啟用，並且當您懸停在圖表上的數據點上時會出現。您可以使用工具提示配置選項自定義工具提示的外觀和行為。例如，要更改工具提示的背景顏色，您可以使用以下代碼：

var mychart = new Chart（CTX，{
type：'bar'，
data：data：data：data ：data，
options：{
tooltips：{
backgroundColor：'rgba（0，0，0，0，0.8）'
}
> }

}）;

此代碼將將工具提示的背景顏色設置為半透明的黑色。您可以使用類似的選項自定義工具提示的許多其他方面。

>如何將動畫添加到我的圖表。 。您可以使用動畫配置選項來控制動畫的持續時間，寬鬆功能和其他方面。例如，要使用2000毫秒和``EaseoutBounce''的寬鬆函數的持續時間對圖表進行動畫動畫，您可以使用以下代碼：


var mychart = new Chart = new Chart（ctx， {
type：''' bar'，
數據：data，
選項：{ 'liseOutBounce'
}
}
}）; 此代碼將在2秒鐘內以彈跳效應為圖表動畫。您可以使用類似的選項自定義動畫的許多其他方面。

以上是幻想，響應式圖表。的詳細內容。更多資訊請關注PHP中文網其他相關文章！