英文:
How to get the doughnut chart using react highcharts?
问题
I tried to achieve this kind of chart.
但是我无法完全得到这个。而是得到了这个。
如何才能获得我想要的确切结果。
这是我尝试使用React Highcharts 做的。有人可以帮我吗？
先感谢了。
英文:
I tried to achieve this kind of chart.
But I couldn't get this exactly. Instead of that I got this.
How can I get that exact thing that I want.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const getOptions = (type) => ({
chart: {
type:'pie',
width: 500,
height: 300,
},
title: {
text: _.startCase(`${type} chart`),
},
plotOptions: {
series: {
borderWidth: 0
},
type: 'pie',
size: '100%',
innerSize: '90%',
dataLabels:{
distance: '-20px'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
title: {
text: 'Values',
},
},
colors: ['#FCE700', '#F8C4B4', '#f6e1ea', '#B8E8FC', '#BCE29E'],
series: [
{
data: [{
y: 61.41,
selected: true
},{
y: 20,
selected: true
}
],
size: '100%',
innerSize: '80%',
dataLabels: {
enabled: false,
labelConnector: false,
}
},
],
});
function App() {
return (
<div>
<HighchartsReact highcharts={Highcharts} options={getOptions('pie')} />
</div>
);
}
<!-- end snippet -->
This is what I tried using react highcharts. Can anyone please help me with this.!
Thanks in advance.
答案1
得分: 0
以下是您想要实现的图表的简化示例：
let data = 81;
Highcharts.chart(container, {
colors: ['#F2BD27', '#222222'],
title: {
text: data + '%',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
borderWidth: 0
}
},
series: [{
type: 'pie',
innerSize: '95%',
data: [data, 100 - data]
}]
});
演示链接：
https://codesandbox.io/s/highcharts-react-demo-forked-yr9zgf
英文:
Here is a simplified example of the chart you want to achieve:
let data = 81;
Highcharts.chart(container, {
colors: ['#F2BD27', '#222222'],
title: {
text: data + '%',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
borderWidth: 0
}
},
series: [{
type: 'pie',
innerSize: '95%',
data: [data, 100 - data]
}]
});
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-yr9zgf
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论