介绍
在前端开发中，数据可视化是一项很重要的工作，而 Plotly.js 是一个非常优秀的数据可视化库。plotly.js-with-locales 是 Plotly.js 的附加包，用于支持多语言环境下的使用需求。在本文中，我们将介绍 npm 包 plotly.js-with-locales 的使用教程，并且通过实例来演示如何实现一个多语言环境的数据可视化应用。
安装
我们可以使用 npm 包管理工具来安装 plotly.js-with-locales。在命令行中输入以下命令：
npm install plotly.js-with-locales
当然，我们也可以使用 yarn：
yarn add plotly.js-with-locales
使用
在引入 plotly.js-with-locales 之前，我们需要先引入 plotly.js，因为 plotly.js-with-locales 是基于 plotly.js 的。在 HTML 文件中添加以下代码：
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-locale-zh-cn-latest.min.js"></script>
上面代码中我们引用了 plotly.js 和 plotly-locale-zh-cn 包，代码注释如下：
https://cdn.plot.ly/plotly-latest.min.js：plotly.js 包的链接；https://cdn.plot.ly/plotly-locale-zh-cn-latest.min.js：plotly.js-with-locales 的中文语言环境包链接。
在页面中我们可以要使用 Plotly.newPlot 函数绘制图表。我们可以通过以下代码调用这个函数：
-- -------------------- ---- ------- -- -- ------ --- ------ - - -- --- -- -- --- -- ---- --- --- ---- ----- --------- -- --- ------ - - -- --- -- -- --- -- ---- --- --- ---- ----- --------- -- --- ------ - - -- --- -- -- --- -- ---- --- --- ---- ----- --------- -- -- ---- ----------------------- -------- ------- -------- - ------ ----- ------ ---
上面代码中，我们调用了 Plotly.newPlot 函数，它的第一个参数是一个 div 的 id，表示我们将在这个 div 中渲染绘制的图表。函数的第二个参数是一个 traces 的数组，表示将要绘制的图表数据集。函数的第三个参数是一个布尔值，表示该图表是否支持跟随鼠标指针的交互；第四个参数是一个对象类型，表示图表的其他属性值，例如图表的标题。
深入
在 plotly.js-with-locales 的不同语言环境包中，我们可以找到以下常用的语言环境包：
plotly-locale-en.js：英文语言环境包；plotly-locale-zh-cn.js：中文（简体）语言环境包；plotly-locale-zh-tw.js：中文（繁体）语言环境包；plotly-locale-ja.js：日语语言环境包；plotly-locale-ko.js：韩语语言环境包；plotly-locale-fr.js：法语语言环境包；plotly-locale-de.js：德语语言环境包；plotly-locale-es.js：西班牙语语言环境包。
我们可以通过引用不同的语言环境包来实现多语言环境下的数据可视化应用。
示例
假设我们需要在一个多语言网站中绘制一个散点图，这个散点图将显示用户在五个不同城市的旅游景区评分。我们通过 plotly.js-with-locales 的中文环境包 plotly-locale-zh-cn 来实现图表的本地化。
HTML 代码如下：
<div id="dataVisDiv"></div>
JS 代码如下：
-- -------------------- ---- -------
-- -- --------- - ------------------- -
--- ---- - ----------------------------------
------------------------------------------------
-- ----
--- ---- - -
-
-- ------ ----- ----- ----- ------
-- ---- --- --- --- ----
----- ----------
----- ----------
------- -
------ ------- -- ----
----- ---
----- -
------ --------- ---- ------
------ ---
-
-
-
--
-- -- ------
--- ------ - -
------ -
----- -------
----- -
------- ------- ------------
----- --
--
-------- --------
--
------ -
------ -
----- -----
----- -
------- ------- ------------
----- --
-
--
--------- -
------- ------- ------------
----- --
-
--
------ -
------ -
----- -----
----- -
------- ------- ------------
----- --
-
--
--------- -
------- ------- ------------
----- --
-
--
-
-- ----
-------------------------- ----- ------- - ------- ------- ---这段代码中，我们先引入了 plotly.js-with-locales 包，并且引入了 plotly.js-with-locales/locales/zh-cn 包，表示我们将要使用中文语言环境。
然后，我们定义了一个散点图的数据集和样式，再定义了该散点图的 layout。我们通过调用 Plot.newPlot 函数，最终将图表渲染到网页的 dataVisDiv div 当中。
结论
通过引用 plotly.js-with-locales 包以及不同的 plotly.js-with-locales 语言环境包，我们可以快速地实现一个多语言环境下的数据可视化应用，而且可以支持多种语言。同时，由于使用了 npm 包管理工具，我们可以快速地安装和更新我们所依赖的包。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669f81e8991b448e2d86