开始使用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中文网其他相关文章！