我试图在HighCharts中实现一个非功能性颜色选择器圈(只是视觉存在)。
我已经能够用纯色创建圆圈(JsFiddle:http://jsfiddle.net/amigoo/zwod86e1/)
HTML:
<div id="container1" style="display:inline-block;"></div>
JS :
$(function() {
Highcharts.setOptions({
colors: ['#8edce7', '#e8ebeb']
});
// Create the chart for completion
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
margin: [0,0,0,0],
height: 100,
width: 100
},
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'In Prog.',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
},
point : {
events: {
mouseOver: function(){
this.oldTitle = chart_completion.options.title.text;
chart_completion.setTitle({
text: 'New title '
});
},
mouseOut: function(){
chart_completion.setTitle({
text: this.oldTitle
});
}
}
}
}]
});
然而,努力使普通颜色变得渐变,使它看起来像这样:
有什么想法吗?