我有一个画笔图表，其中有两个数据集，它们的值相差很大。我试图改变两个数据集的y轴的最大值。我在画笔图表线中成功地做到了这一点，但在主图表中却没有。目前，左侧对应于价格图的y轴没有最大值1，这是我希望我的代码做的。然而，它在画笔图表线上工作。
我不知道如何解决这个问题.
在下面的片段中看到我的问题的一个例子。
const pricedata = [{
"x": 1697842800000,
"y": 0.834
},
{
"x": 1697929200000,
"y": 0.835
},
{
"x": 1698015600000,
"y": 0.831
},
{
"x": 1698102000000,
"y": 0.821
},
{
"x": 1698188400000,
"y": 0.768
},
{
"x": 1698274800000,
"y": 0.751
},
{
"x": 1698361200000,
"y": 0.756
},
{
"x": 1698447600000,
"y": 0.766
},
{
"x": 1698534000000,
"y": 0.75
},
{
"x": 1698624000000,
"y": 0.751
},
{
"x": 1698710400000,
"y": 0.761
},
{
"x": 1698796800000,
"y": 0.722
},
{
"x": 1698883200000,
"y": 0.705
},
{
"x": 1698969600000,
"y": 0.72
},
{
"x": 1699056000000,
"y": 0.736
},
{
"x": 1699142400000,
"y": 0.739
},
{
"x": 1699228800000,
"y": 0.738
},
{
"x": 1699315200000,
"y": 0.747
},
{
"x": 1699401600000,
"y": 0.702
},
{
"x": 1699488000000,
"y": 0.701
},
{
"x": 1699574400000,
"y": 0.703
},
{
"x": 1699660800000,
"y": 0.685
},
{
"x": 1699747200000,
"y": 0.668
},
{
"x": 1699833600000,
"y": 0.657
},
{
"x": 1699920000000,
"y": 0.621
},
{
"x": 1700006400000,
"y": 0.556
},
{
"x": 1700092800000,
"y": 0.541
},
{
"x": 1700179200000,
"y": 0.564
},
{
"x": 1700265600000,
"y": 0.566
},
{
"x": 1700352000000,
"y": 0.558
},
{
"x": 1700438400000,
"y": 0.558
},
{
"x": 1700524800000,
"y": 0.556
},
{
"x": 1700611200000,
"y": 0.526
},
{
"x": 1700697600000,
"y": 0.515
},
{
"x": 1700784000000,
"y": 0.521
},
{
"x": 1700870400000,
"y": 0.529
},
{
"x": 1700956800000,
"y": 0.545
},
{
"x": 1701043200000,
"y": 0.537
},
{
"x": 1701129600000,
"y": 0.55
},
{
"x": 1701216000000,
"y": 0.569
},
{
"x": 1701302400000,
"y": 0.584
},
{
"x": 1701388800000,
"y": 0.608
},
{
"x": 1701475200000,
"y": 0.629
},
{
"x": 1701561600000,
"y": 0.669
}];
const saledata = [{
"x": 1697842800000,
"y": "147746"
},
{
"x": 1697929200000,
"y": "130250"
},
{
"x": 1698015600000,
"y": "104664"
},
{
"x": 1698102000000,
"y": "100406"
},
{
"x": 1698188400000,
"y": "151495"
},
{
"x": 1698274800000,
"y": "131127"
},
{
"x": 1698361200000,
"y": "133737"
},
{
"x": 1698447600000,
"y": "127386"
},
{
"x": 1698534000000,
"y": "113109"
},
{
"x": 1698624000000,
"y": "95932"
},
{
"x": 1698710400000,
"y": "99510"
},
{
"x": 1698796800000,
"y": "144000"
},
{
"x": 1698883200000,
"y": "119658"
},
{
"x": 1698969600000,
"y": "111486"
},
{
"x": 1699056000000,
"y": "108381"
},
{
"x": 1699142400000,
"y": "96228"
},
{
"x": 1699228800000,
"y": "74594"
},
{
"x": 1699315200000,
"y": "73836"
},
{
"x": 1699401600000,
"y": "118380"
},
{
"x": 1699488000000,
"y": "101331"
},
{
"x": 1699574400000,
"y": "100519"
},
{
"x": 1699660800000,
"y": "102802"
},
{
"x": 1699747200000,
"y": "88036"
},
{
"x": 1699833600000,
"y": "72038"
},
{
"x": 1699920000000,
"y": "80203"
},
{
"x": 1700006400000,
"y": "144604"
},
{
"x": 1700092800000,
"y": "101407"
},
{
"x": 1700179200000,
"y": "91762"
},
{
"x": 1700265600000,
"y": "96331"
},
{
"x": 1700352000000,
"y": "84467"
},
{
"x": 1700438400000,
"y": "66007"
},
{
"x": 1700524800000,
"y": "69887"
},
{
"x": 1700611200000,
"y": "138652"
},
{
"x": 1700697600000,
"y": "111720"
},
{
"x": 1700784000000,
"y": "108708"
},
{
"x": 1700870400000,
"y": "101870"
},
{
"x": 1700956800000,
"y": "99798"
},
{
"x": 1701043200000,
"y": "72229"
},
{
"x": 1701129600000,
"y": "71358"
},
{
"x": 1701216000000,
"y": "102909"
},
{
"x": 1701302400000,
"y": "87627"
},
{
"x": 1701388800000,
"y": "89769"
},
{
"x": 1701475200000,
"y": "93981"
},
{
"x": 1701561600000,
"y": "78223"
}];
var options = {
series: [{
name: 'Sold units',
type: 'column',
data: saledata
}, {
name: 'Price',
type: 'line',
data: pricedata
}],
chart: {
id: "chart2",
height: 350,
type: 'line',
toolbar: {
autoSelected: 'pan',
show: false
}
},
tooltip: {
theme: 'dark',
},
colors: [ "#333", '#F44336'],
stroke: {
width: 3
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
markers: {
size: 0,
strokeColors: '000',
strokeWidth: 1,
hover: {
ssize: 4
}
},
xaxis: {
type: 'datetime',
labels: {
style: {
colors: "#FFFFFF"
}
}
},
yaxis: [{
tickAmount: 3,
opposite: true,
labels: {
style: {
colors: ["#FFFFFF"]
},
formatter: function(val, index) {
return val.toFixed(0);
},
},
max: 500000,
},
{
tickAmount: 3,
labels: {
style: {
colors: ["#FFFFFF"]
},
formatter: function(val, index) {
return "$" + val.toFixed(2);
},
},
max: 1,
}
],
grid: {
borderColor: "#333"
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var optionsLine = {
series: [{
name: 'Sold units',
type: 'column',
data: saledata
}, {
name: 'Price',
type: 'line',
data: pricedata
}],
chart: {
id: 'chart1',
height: 200,
type: 'area',
brush:{
target: 'chart2',
enabled: true
},
selection: {
enabled: true,
xaxis: {
min: new Date('25 Oct 2023').getTime(),
max: new Date('30 Oct 2023').getTime()
},
fill: {
color: '#F44336'
}
},
},
colors: ['#FFFFFF','#FFFFFF'],
xaxis: {
type: 'datetime',
tooltip: {
enabled: true
},
labels: {
style: {
colors: "#FFFFFF"
}
}
},
yaxis: [{
opposite: true,
labels: {
style: {
colors: "#ffffff"
},
formatter: function(val, index) {
return val.toFixed(0);
},
},
max: 500000,
},
{
labels: {
style: {
colors: "#ffffff"
},
formatter: function(val, index) {
return "$" + val.toFixed(2);
},
},
max: 1,
}
],
grid: {
show: false // Hide horizontal grid lines
}
};
var chartLine = new ApexCharts(document.querySelector("#chartline"), optionsLine);
chartLine.render();body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #1c1c1c;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<title>Document</title>
</head>
<body>
<div id="chart"></div>
<div id="chartline"></div>
</body>
</html>
1条答案
按热度按时间rn0zuynd1#
这似乎是ApexCharts本身的问题，而pull request has been made to fix it. PR是一年多前制作的，尚未合并，因此问题仍然存在。目前似乎没有解决此问题的方法。