我正在嘗試從Highcharts庫中為我的圓環圖添加一些邊框半徑和漸變顏色。附上預期的圖表和我設法創建的圖像,以及我的代碼。
預期圖表:
我當前的進度:
$(function() {
var data = < %= raw @array_color.to_json % > ;
var total_project_count = < %= @total_project_count % >
var total_project_text = `Totatl Projects<br/>${total_project_count}`
var total_project_text = `<span class="project_count_text">TOTAL PROJECTS</span><br/><span class="project_count_dummy">""</span><br/><span class="project_count_count">${total_project_count}</span>`
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
},
credits: false,
plotOptions: {
pie: {
borderWidth: 6,
innerSize: '80%',
// borderColor: null,
slicedOffset: 5,
stacking: 'normal',
dataLabels: {
connectorWidth: 2
},
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function(event) {
var options = this.options;
update_rag(options.status);
}
}
}
},
},
title: {
verticalAlign: 'middle',
floating: true,
text: total_project_text,
},
series: [{
data: data,
}, ],
});
在版本11中,出現了borderRadius屬性,允許您對元素進行舍入。
對于顏色表,除了十六進制值的字符串,還可以傳遞高圖表。GradientColorObject,您可以使用它來設置漸變,但我不確定您是否能夠完全復制您發送的圖片。
演示:https://jsfiddle.net/BlackLabel/8ocrzyaj/ API:https://API . high charts . com/high charts/series . pie . borderradius https://api.highcharts.com/highcharts/colors