关于vue使用highcharts饼状图渐变色报错问题

highcharts制作3D饼图渐变效果 阅读详情

今天用highchart画3d渐变色时用了官方的示例代码

// 创建渐变色
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
	return {
		radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		stops: [
			[0, color],
			[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
		]
	};
});
// 构建图表
var chart = Highcharts.chart('container',{
	title: {
		text: '2014年某网站各浏览器的访问量占比'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				connectorColor: 'silver'
			}
		}
	},
	series: [{
		type: 'pie',
		name: '浏览器占比',
		data: [
			['Firefox',   45.0],
			{
				name: 'Chrome',
				y: 12.8,
				sliced: true,
				selected: true
			},
		]
	}]
});

但是在vue热更新以后总是会报错[Vue warn]: Error in mounted hook: "TypeError: b[1].indexOf is not a function" 
发现只有热更新的时候会报这个错,所以应该是第二次加载的时候会有问题,通过调试发现第二次function里的color从字符串色值变为了我们设置的这个对象所以导致设置色值的时候拿到的是一个对象。下面为优化写法,保证每次都color都为色值

let startColor = ''
let endColor = ''
// 第二次的时候color变为了对象,所以取色值要从对象里取
if (color instanceof Object) {
  startColor = color.stops[0][1]
  endColor = color.stops[1][1]
} else {
  startColor = color
  endColor = Highcharts.Color(color)
    .brighten(0.15)
    .get('rgb')
}
return {
  radialGradient: { cx: 0, cy: 0, r: 1 },
  stops: [[0, startColor], [1, endColor]]
}

还有一点,highcharts官网上的Highcharts.map方法建议改为Array.map

Highcharts 图形报表 Highcharts 图形报表 线形图 柱状图 各种图形 Highcharts 图形报表 线形图 柱状图 各种图形 立即下载

相关推荐

PLL锁相环基础知识(一)

本文介绍了锁相环(PLL)的核心组件及其工作原理,重点阐述了压控振荡器(VCO)的结构与调谐机制。VCO作为PLL的关键部分,通过变容二极管实现频率调谐,但易受温度、电压等因素影响稳定性。文章详细讲解了VCO的谐振电路原理、硅基集成方案,以及通过分频器和调制器实现的频率控制技术。特别分析了整数型和分数型N分频器的差异,指出高阶德尔塔-西格玛调制器可有效降低分数杂散。文章还探讨了预分频器的应用及其对频率分辨率的影响,揭示了PLL通过反馈环路实现频率锁定的基本原理。

weixin_49761275的博客 3029

【图表】highcharts 3D立体饼图渐变带背景 vue

highcharts 3D立体饼图渐变透明带背景

heye0815的博客 3246

基于ABCDRez的激光谐振腔设计与热透镜效应仿真实践

本文详细介绍了如何利用ABCDRez代码包进行激光谐振腔设计与热透镜效应仿真。通过ABCD矩阵理论和高斯光束q参数,该工具能有效模拟热透镜动态变化对腔稳定性的影响,指导腔型优化与热补偿设计,是固体激光器预研与调试的高效辅助手段。

weixin_29093017的博客 289

使用highchart实现3D饼图(重点是3D图、饼图图例不显示问题)

一:使用highchart实现3D饼图 HTML:需要一个容器来绘图 <div class="dataItemRight" id="trafficData"></div> JS:所需js文件 <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://cdn.highchar...

sjt1010的博客 3907

改进爬山算法之六:随机重启爬山算法(Random-Restart Hill Climbing,RRHC)

随机重启爬山算法(Random-Restart Hill Climbing,RRHC)是爬山算法的一种改进策略,是一种启发式搜索算法,旨在通过随机重启来克服传统爬山算法容易陷入局部最优解的局限性,并增加找到全局最优解的概率。随机重启爬山算法通过在多次运行中不断尝试不同的初始解,并在每次运行中执行标准的爬山算法,最终选择所有运行中找到的最佳解作为最终结果。(1)计算复杂度:由于需要多次运行爬山算法,因此算法的计算复杂度可能较高,特别是在解空间较大或每次迭代需要较长时间的情况下。

搏博的专栏 2204

ISO21434 组织网络安全管理(二)

为了实现网络安全工程,该组织建立并维护网络安全治理和网络安全文化,包括网络安全意识管理、能力管理和持续改进。这涉及到指定针对本文档的目标进行独立审计的特定于组织的规则和过程。 为了支持网络安全工程,该组织实施了网络安全的管理系统,包括管理工具和应用质量管理系统。

qq_42357877的博客 1322

使用Highcharts显示饼图时,浏览器崩溃,响应不过来

原因,chartData数据里面的data值都是零。只要把数据进行判断下就行了

liuzhen_1215的博客 993

北斗导航 | raPPPid软件功能模块详解

raPPPid(Rapid Precise Point Positioning with integer ambiguity resolution,快速精密单点定位与整周模糊度解算)是由维也纳工业大学(TU Wien)大地测量与地理信息系开发的MATLAB开源PPP软件包。它是VieVS(Vienna VLBI and Satellite Software,维也纳VLBI与卫星软件)的PPP模块,由Marcus Franz Glaner和Robert Weber主导开发。

尘世冰封的专栏 583

ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色

ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色

JackChan 6270

深度学习100例-卷积神经网络(CNN)彩色图片分类 | 第2天

文章目录前期工作设置GPU导入数据标准化可视化构建CNN网络编译训练模型预测模型评估 前期工作 设置GPU 如果使用的是CPU可以忽略这步 import tensorflow as tf gpus = tf.config.list_physical_devices("GPU") if gpus: gpu0 = gpus[0] #如果有多个GPU,仅使用第0个GPU tf.config.experimental.set_memory_growth(gpu0, True) #设置GPU显存用量

“365天深度学习训练营”报名进行中~ 7853

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

使用highcharts完成3d饼图,块状凸出,渐变色

组件代码(注释写在代码中,有些配置我也不是很多,网上找的,发现能用就直接用了)我是写在组件里面的,所以用的父传子。在main.js中进行引用。

qq_46131497的博客 1505

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

highcharts简单用法

做项目的时候有个模块的图表用到了highcharts展示,所以自己简单整理弄了一下页面的展示,不涉及后台;参考用到的地址:https://www.highcharts.com/demo,这个是我参考的网址,挺好用的,里边的例子也很简单易懂。在自己的页面中添加了一些简单的小备注,很容易看懂,但是发现有的浏览器打开页面有点兼容问题,大部分还是好使的哈~,欢迎大神提出比如IE怎么解决兼容问题哈!页面添加...

vv_wisher的博客 2349

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

HighCharts各种提醒解决方案

HighCharts各种提醒解决方案

qq_42396791的博客 1705

vue+highcharts图表颜色渐变

在vue中使用highcharts如何更改图表颜色为渐变色 想要更改颜色只需要在series里面添加 lineColor: "#12DAFB", // color: "#12DAFB", color: { fillOpacity: 0.05, linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [

qq_45495460的博客 1254

vue引入highcharts,启动项目后报错,分享解决思路

最近在启动老项目的时候遇到了这个报错,找了半天原因,发现是由于引入highcharts导致的报错,于是开始查找如何引入highcharts,最终发现和引入没有关系,而是。报错是安装了高版本的V11.4.0导致的,改成V7.2.2版本再重启项目就可以了。

weixin_56058658的博客 2145

vue hicharts部分告警及问题解决方法

1、没有指定容器 ighstock.js?9c44:11 Uncaught Error: Highcharts error #13: 增加id,并在创建时指定该id的容器 2、指定的坐标轴不存在 highstock.js?9c44:11 Uncaught Error: Highcharts error #18: 此函数中未分析到数据undefined,故此更新时报该18错误 该问题原因是解析csv数据错误,从而导致undefined,解决该问题检查数据解析 3、在函数中报csvToObject函数u

longnansanye的博客 1115

HighCharts柱状图设置渐变色

利用

u010158775的专栏 1万+

hightcharts引入3d模块报错问题解决

【代码】hightcharts引入3d模块报错问题解决。

creatlh的博客 587

highcharts 组合chart

/** *制作 复杂的组合型的 charts * *@param [options] 图表的默认配置 *@dependence jQuery、highcharts *@author wch */ function ComboCharts(options){ //定义jQuery变量,以防冲突 var $= jQuery; var _dom_id = ''; ...

weixin_30711917的博客 156

vue-highcharts 项目常见问题解决方案

vue-highcharts 项目常见问题解决方案 项目基础介绍 vue-highcharts 是一个用于在 Vue.js 2.x 项目中集成 Highcharts 图表库的开源组件。Highcharts 是一个功能强大的图表库,支持多种图表类型,如折线图、柱状图、饼图等。vue-highcharts 通过封装 Highcharts,使得在 Vue.js 项目中使用 Highcharts 变得更加...

gitblog_07243的博客 638

Highcharts 3D饼状图用法示例(options3d属性设置无效。。。)

Highcharts 3D饼状图用法示例(options3d属性设置无效。。。)

千里之行,始于足下 955

Vue3 highCharts 3D

【代码】Vue3 highCharts 3D。

qiulei_21的专栏 1048

Vue使用hightcharts中的韦恩图及报错解决方法

vue使用hightcharts韦恩图 一、首先安装两个依赖 npm install highcharts-vue npm install highcharts --save 二、在main.js中引入 import HighchartsVue from "highcharts-vue"; Vue.use(HighchartsVue); 三、在组件里面调用 <template> <div class="hello"> <div id="container"&gt

weixin_49813550的博客 2384

highCharts使用中问题总结

想出一张图表,数据是多条线体,45天的数据展示最近15天的。并且每次展示其中一条。可以切换时间看前面的 或者后面的。最开始遇到的问题是,展示一条线体成功,但是在切换线体的时候,成功但是接着刷新到最开始的状态。跟同事分析后发现是方法引用的问题。也就是每次在给highCharts赋值时要保证都是重新打开一个图表,但是数据切换了。 数据的展示。遇到的问...

weixin_30653023的博客 500
上一篇: Echarts地图registerMap使用的GeoJson数据获取
下一篇: mapBox使用笔记
汉堡哥·尼古拉斯
博客等级 码龄9年 7粉丝 21原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值