開始使用Chart.js：簡介

原始數據，無論是文本還是表格，都難以消化。 Chart.js通過可視化數據提供了令人信服的解決方案，從而更容易理解複雜的信息。

考慮一下該表顯示世界上十個人口最多的國家：（為簡潔而省略了表，因為它與圖表的功能無直接相關）。

要使用Chart.js，請先安裝它：

 npm安裝圖表 - 保存

雖然Chart.js先前捆綁了Moment.js，但不再是這種情況。對於時間尺度圖表，您需要一個日期適配器（例如date-fns）和相應的庫。 date-fns是更簡單應用的輕量級選項。此示例使用date-fns並自定義傳說的字體。

 var barchart =新圖表（popcanvas，{
    類型：'bar'，
    數據：數據，
    選項： {
        插件：{
          傳奇： {
            顯示：是的，
            位置：“底部”，
            標籤：{
              框寬：50，
              顏色：黑色”，
              字體：{
                尺寸：24，
                體重：“大膽”
              }
            }
          }
        }
    }
}）; 

Chart.js允許對工具提示進行顆粒狀控制。 Chart.defaults.plugins.tooltip設置全局工具提示樣式，而各個圖表選項提供了進一步的自定義。此示例演示了自定義字體，填充，箭頭大小和背景。

選項： {
    插件：{
      傳奇： {
        顯示：是的，
        位置：“底部”，
        標籤：{
          框寬：50，
          顏色：黑色”，
          字體：{
            尺寸：24，
            體重：“大膽”
          }
        }
      }，，
      工具提示：{
        康納拉迪烏斯：0，
        看守：0，
        填充：10，
        背景色：“黑色”，
        BorderColor：“灰色”，
        邊界寬：5，
        titlemarginbottom：4，
        titlefont：{
          “重量”：“大膽”，
          “大小”：22
        }
      }
    }
}

將caretSize設置為0隱藏工具提示箭頭。以下演示顯示了這些自定義的工具：

結論：

該圖表的簡介演示了條形圖創建和自定義。顯示的配置選項適用於各種圖表類型。未來的教程將深入研究線路圖和條形圖。 Chart.js是JavaScript Web開發中數據可視化的強大工具。 （注意：引用的人口數據源）。

以上是開始使用Chart.js：簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！