简介
bobril-highcharts 是一个基于 Highcharts 的插件，它提供了一些对 Highcharts 进一步封装的功能，使得使用 Highcharts 更加方便快捷。
bobril-highcharts 可以同时支持 bobril 和 React 两种框架，使得它可以在不同的项目中被轻松使用。
安装
你可以直接使用 npm 进行安装：
npm install bobril-highcharts --save
使用
bobril-highcharts 将 Highcharts 的使用封装为可重用的组件，使得它可以在多个地方被调用。
引入
在使用 bobril-highcharts 之前，你需要引入 Highcharts，你可以使用以下的引入方式：
<script src="//code.highcharts.com/highcharts.js"></script>
在你的代码中引入 bobril-highcharts：
import * as bHighcharts from "bobril-highcharts";
使用示例
使用 bobril-highcharts 只需要按以下步骤进行：
- 创建 Highcharts 的配置对象。
-- -------------------- ---- ------- ----- ------- ------------------ - - ------ - ----- ------- -- ------ - ----- -------- ------- ------------- -- ------ - ----------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------- -- ------ - ------ - ----- ------------ ------ -- -- ------- -- ----- -------- ----- ----- ---- ---- ----- ----- ----- ----- ----- ----- ----- ----- ----- -- - ----- ---- ------ ----- ------ ---- ---- ----- ----- ----- ----- ----- ----- ----- ---- ----- -- - ----- --------- ----- ------ ---- ---- ---- ----- ----- ----- ----- ----- ---- ---- ----- -- - ----- --------- ----- ----- ---- ---- ---- ----- ----- ----- ----- ----- ----- ---- ----- --- --展开代码
- 使用 bHighcharts.chart 函数创建一个 Highcharts 组件。
const myChart = bHighcharts.chart(config, { width: 800, height: 600, });
- 将组件添加到页面中。
b.init(() => { return b.styledDiv(myChart, { width: "800px", height: "600px", }); });
现在你就完成了一个简单的 Highcharts 图表的创建。
配置
bobril-highcharts 支持所有 Highcharts 的配置选项，你可以在创建配置对象时添加它们。
-- -------------------- ---- ------- ----- ------- ------------------ - - ------ - ----- ------ -- ------ - ----- --- --- ------- -- ------ - ----------- ------- ------ ------- -- ------ - ------ - ----- -------- -- -- ------- -- ----- ---------- ----- ----- ---- ----- --- --展开代码
bobril-highcharts 还提供了一些自定义配置选项，可以在创建 Highcharts 组件时添加它们：
const myChart = bHighcharts.chart(config, { width: 800, height: 600, className: "myChart", });
总结
bobril-highcharts 提供了一种方便快捷的方式使用 Highcharts，使得创建图标变得更加简单明了。
一些常见的 Highcharts 配置选项在 bobril-highcharts 中也被支持，你可以更加灵活地进行配置。
我们建议你在你的项目中使用 bobril-highcharts，以便更加有效地展示数据。
如果你想要了解更多有关 bobril-highcharts，请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005557e81e8991b448d2a98
