这是我的脚本选项,使用apexcharts图表
还有我的剧本
var options = {
series: [{
name: 'Profit',
data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38},...
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.45,
opacityTo: 0.9
},
},
plotOptions: {
area: {
colors: {
ranges: [
{
from: -100,
to: 0,
color: "#e85347" // Red color
},
{
from: 0,
to: 100,
color: "#1ee0ac" // Green color
}
]
},
columnWidth: "80%"
}
},
yaxis: {
labels: {
offsetX: 0,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 8,
labels: {
rotate: -45,
rotateAlways: true,
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("DD MMM")
}
}
},
tooltip: {
shared: true
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetX: -10
}
};
var chart = new ApexCharts(document.querySelector("#portfolio_line"), options);
chart.render();
如何配置当值小于零时,条形图的颜色将为红色,大于0时将为绿色
1条答案
按热度按时间yftpprvb1#
这是我如何使用垂直梯度。其中百分比是范围面积图的百分比。