highcharts图表易错篇:前端通过string.split()得到的array数组直接赋值给series内data前需要做什么

本文介绍了如何正确地将从后台获取的字符串数据转换为Highcharts图表所需的格式,并提供了两种有效的解决方案,包括数组转换和字符串格式化。

为了让highcharts图表数据可以动态从后台页面获取,我们通常都是使用Ajax进行异步获取数据,通过其回调函数返回前端需要的数据。返回的数据格式有多种:json数据还有纯粹的字符串数据。
当我们返回的数据为字符串时,如:”7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6”
我们得到这个数据需要动态赋值给highcharts图表内第一个序列的data属性值,常常我们都会这样做:

var pStr = "7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6";
//定义一个数组
var pDataArr = new Array();
//借用js的split()方法直接将字符串转换为数组
pDataArr = pStr.split(',');

//然后赋值于serise内的data
chart.series[0].update({
   data:pDataArr;
});

或者干脆就这样:

//然后赋值于serise内的data
chart.series[0].update({
   data:pStr;
});

以上两种方式均是错误的,图表根本就加载不了数据进来。
原因分析:
1、针对第一种赋值方式,违背了data数据为非字符串的原则,我们将其pStr转换为数组后其实你debugger后发现每一个值其实都是字符串,所以用字符串数组赋值给data会报错的。解决办法就是将数组内每一个字符串转换为整数就可以了的。示例代码如下所示:

var str = "7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6";
vData = str.split(',');
for (var i = 0; i < vData.length; i++) {
            vData[i] = parseInt(vData[i]); //转换数据
}

//赋值给series
chart.series[0].update({
   data:vData;
});

2、针对第二个直接将字符串赋值给series的data更是大错特错,series的data要的是一个数据对象,所以我们要想办法将字符串格式化为数据对象就可以了的。这个时候我们想到了eval()函数,示例代码如下所示:

var pStr = "7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6";

chart.series[0].update({
    data: eval("["+pStr+"]")
});

了解更多highcharts

<think>我们正在解决Highcharts错误#17:missingModuleFor: bubble。这个错误通常是因为缺少相应的模块。bubble图需要额外的模块,我们需要确保正确引入。 根据引用[1]中解决venn图类似错误的方法,我们可以推测: 1. 需要引入bubble图对应的模块。 2. 在创建图表,确保模块已经加载。 步骤: 1. 安装或导入Highcharts的bubble模块。在Highcharts中,bubble图属于散点图的一种,但需要额外的模块`highcharts/modules/exporting`和`highcharts/modules/export-data`?实际上,bubble图的核心模块是`highcharts/modules/series-label`?不对,实际上bubble图需要的是`highcharts/modules/variable-pie`?不对,正确的应该是:bubble图属于散点图系列,但需要引入`highcharts/modules/series-bubble`?然而,根据Highcharts官方文档,bubble图实际上是散点图的一个变种,在Highcharts中,散点图是内置的,但bubble图需要引入额外的模块吗? 实际上,在Highcharts中,bubble图需要引入`highcharts-more`模块。但是,在较新的版本中,bubble图被移到了单独的模块中?我们需要查看官方文档。 根据Highcharts官方文档(https://api.highcharts.com/highcharts/series.bubble): “The bubble series is included in Highcharts. However, for using it you need to load the highcharts-more.js file.” 因此,我们需要引入`highcharts-more`模块。 解决方法: 1. 安装highcharts-more模块(如果使用npm): ```bash npm install highcharts-more --save ``` 2. 在组件中引入并初始化该模块: ```javascript import Highcharts from 'highcharts'; import HighchartsMore from 'highcharts/highcharts-more'; // 初始化模块 HighchartsMore(Highcharts); ``` 然后,再创建图表。 因此,修改组件代码: ```vue <template> <div class="x-bar"> <div :id="id"></div> </div> </template> <script> import Highcharts from 'highcharts'; import HighchartsMore from 'highcharts/highcharts-more'; // 应用模块 HighchartsMore(Highcharts); export default { name: "BubbleChart", props: { id: { type: String }, option: { type: Object } }, mounted() { Highcharts.chart(this.id, this.option); } } </script> ``` 注意:有时候,如果还需要其他功能(如导出),则可能需要引入其他模块(如exporting等),但针对bubble图,只需要highcharts-more模块。 另外,确保你的Highcharts版本支持这个模块。如果问题仍然存在,请检查版本兼容性。 如果使用CDN方式,则需要额外引入highcharts-more.js: ```html <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> ``` 总结:missingModuleFor: bubble 错误是因为缺少highcharts-more模块,引入并初始化即可。 相关问题: 1. Highcharts中还有哪些图表需要额外引入模块? 2. 如何按需引入Highcharts模块以减少打包体积? 3. 除了bubble图,highcharts-more模块还支持哪些图表类型? </think>针对 Highcharts 错误代码 `#17 (missingModuleFor: bubble)` 的解决方法如下: ### 错误原因分析 `missingModuleFor: bubble` 错误表明 Highcharts **缺失气泡图(bubble chart)所需的专用模块**。气泡图是散点图的变体,需要额外加载 `highcharts-more.js` 模块才能正常工作[^1]。 --- ### 解决方法(基于 Vue 组件) #### 步骤 1:安装必要模块 ```bash npm install highcharts highcharts-more # 核心库 + 气泡图扩展模块 ``` #### 步骤 2:修改组件代码 ```vue <template> <div :id="id"></div> <!-- 简化DOM结构 --> </template> <script> import Highcharts from 'highcharts'; import HighchartsMore from 'highcharts/highcharts-more'; // 关键:引入气泡图模块 HighchartsMore(Highcharts); // 激活扩展模块 export default { name: "BubbleChart", props: { id: { type: String, required: true }, // 强制要求ID option: { type: Object, required: true } // 强制要求配置 }, mounted() { Highcharts.chart(this.id, this.option); // 渲染图表 }, // 添加图表更新逻辑 watch: { option(newOption) { Highcharts.chart(this.id, newOption); } } } </script> ``` #### 步骤 3:检查配置项 确保 `chart.type` 正确设置为 `'bubble'`: ```js // 父组件传递的配置示例 const option = { chart: { type: 'bubble' }, // 必须指定类型 series: [{ data: [[1, 2, 3], [4, 5, 6]] // [x, y, 半径] }] } ``` --- ### 关键修复点 1. **模块引入** 必须显式导入并初始化 `highcharts/highcharts-more` 模块[^1]。 2. **按需加载** 如果项目使用按需加载,需确认打包配置包含该模块(Webpack/Rollup 需额外配置)。 3. **版本兼容性** 检查 Highcharts 与 `highcharts-more` 版本匹配(推荐使用相同主版本号)。 --- ### 替代解决方案(CDN 方式) 若未使用打包工具,直接在 HTML 中加载: ```html <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- 关键 --> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值