面积图的 Apexcharts 淡入淡出配置
Apexcharts fade configuration for area chart
我正在尝试创建一个如下所示的图表:
https://i.stack.imgur.com/9KpYO.png
但我得到这个:
https://i.stack.imgur.com/oA7Vm.png
这是我的配置:
{
chartOptions: {
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.2,
opacityTo: 0.7,
stops: [0, 50, 80, 100]
}
},
tooltip: { enabled: false}
},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
主要是关于填充配置填充区域过多,而不是填充在顶部最高,它在底部,这使得渐变与我需要的相反。
尝试交换 opacityFrom
和 opacityTo
、
的值
并删除 stops
的选项
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
请参阅以下工作片段...
$(document).ready(function() {
var chart = new ApexCharts(
document.getElementById('chart'),
{
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
tooltip: { enabled: false},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
);
chart.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
我正在尝试创建一个如下所示的图表: https://i.stack.imgur.com/9KpYO.png
但我得到这个: https://i.stack.imgur.com/oA7Vm.png
这是我的配置:
{
chartOptions: {
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.2,
opacityTo: 0.7,
stops: [0, 50, 80, 100]
}
},
tooltip: { enabled: false}
},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
主要是关于填充配置填充区域过多,而不是填充在顶部最高,它在底部,这使得渐变与我需要的相反。
尝试交换 opacityFrom
和 opacityTo
、
的值
并删除 stops
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
请参阅以下工作片段...
$(document).ready(function() {
var chart = new ApexCharts(
document.getElementById('chart'),
{
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
tooltip: { enabled: false},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
);
chart.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>