[英]How to change the background color the chart area in high charts?
I'm using Highcharts JS.我正在使用 Highcharts JS。 I want to change the colors of the line, the dots and background color of the area underneath the line.我想更改线条的颜色、线条下方区域的点和背景颜色。
I tried many ways but none of them worked.我尝试了很多方法,但都没有奏效。 I've create a project on JsFiddle so that you can see the code and change it if you have the solution to help me solve this problem.我在 JsFiddle 上创建了一个项目,以便您可以查看代码并更改它,如果您有解决方案可以帮助我解决这个问题。
Sample on JSFiddle: JSFiddle 上的示例:
line Chart using highcharts使用 highcharts 的折线图
My code:我的代码:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'charts',
type: 'area',
backgroundColor: '#4b0e26',
style: {
fontFamily: 'CairoFont',
color: "#ffffff",
}
},
xAxis: {
categories: [
'يناير',
'فبراير',
'مارس',
'إبريل',
'مايو',
'يوليو',
'يونيو',
'أغسطس',
'سبتمبر',
'أكتوبر',
'نوفمبر',
'ديسمبر',
],
reversed: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
yAxis: {
title: {
text: false,
useHTML: Highcharts.hasBidiBug,
},
opposite: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
title: {
text: 'الطلاب الجدد',
useHTML: Highcharts.hasBidiBug,
style:{
color: '#fff',
}
},
legend: {
enabled: false
},
tooltip: {
useHTML: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3,
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
}]
});
If you want to adjust the color for this series, you can use https://api.highcharts.com/highcharts/plotOptions.series.color .如果你想调整这个系列的颜色,你可以使用https://api.highcharts.com/highcharts/plotOptions.series.color 。 So you would just set your series like:因此,您只需将系列设置为:
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
color: '#ff0000'
}]
See a working demo at https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/ from their documentation or https://jsfiddle.net/pkcrt5q2/ for your specific example.在https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/从他们的文档或https://jsfiddle查看工作演示.net/pkcrt5q2/为您的具体示例。
Additionally, you can set this as a global option as described at https://api.highcharts.com/highcharts/colors .此外,您可以将其设置为全局选项,如https://api.highcharts.com/highcharts/colors 中所述。
Highcharts.setOptions({
colors: ['#ff0000']
});
Working demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/工作演示: https : //jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.