apexcharts.js 总是显示一定数量的水平线答案

【问题标题】：apexcharts.js always display a set amount of horizontal linesapexcharts.js 总是显示一定数量的水平线
【发布时间】：2021-04-24 10:26:10
【问题描述】：

我用 2 个不同的数据集创建了相同的顶点图。图表 1 看起来很棒，带有水平线。但是图表 2 只有 1 条水平线。

图表 1 和图表 2 之间的唯一区别是数据集。如何在图表上始终显示 5 条水平线？

图一：https://codepen.io/dedefeefdef/pen/GRrzoNj

数据集 1：

    [[1619173193036,49407.535435718644],[1619176091510,49549.26563563993],[1619179037350,50138.28330288627],[1619182201670,49797.38039516057],[1619185113178,49034.01097606104],[1619188127394,49524.184512772634],[1619191189295,49576.50939492852],[1619194162163,50205.73169158809],[1619197144978,50073.48029019594],[1619200103693,50115.77589945983],[1619203154512,50596.642200351744],[1619206164399,50777.75836621535],[1619209161605,51428.66818308527],[1619212172077,50846.83181180289],[1619215102695,50443.96733946523],[1619218180736,50740.97575842062],[1619221165616,50847.88134692881],[1619224199653,50448.69953560474],[1619227160254,49943.27825537499],[1619230041721,49712.238215643156],[1619233139782,50144.43808207704],[1619236181862,50468.26366127149],[1619239136429,50360.42255156926],[1619242087409,50377.45754274844],[1619245135556,50531.35036881819],[1619248237594,50062.40313986315],[1619251214964,49907.96886371824],[1619254186363,50141.20384968558],[1619259102000,49412.67996377031]]

图 2：https://codepen.io/dedefeefdef/pen/VwPgeKL

数据集 2：

   [[1619173150399,1.0940878381417847],[1619176129124,1.1070033240375783],[1619179360960,1.1335610023715914],[1619182375797,1.0987262566796245],[1619185499396,1.0694830118537217],[1619188437886,1.1112241146594293],[1619191471163,1.0877301924115799],[1619194426800,1.1078699893603736],[1619197429216,1.1017656067359929],[1619200387208,1.0989519988768361],[1619203420737,1.1129932263760143],[1619206362548,1.11105234071539],[1619209395648,1.1440514951415397],[1619212482497,1.1314118311313806],[1619215435039,1.1124574692062728],[1619218357604,1.1229133868529708],[1619221458977,1.1517979836016765],[1619224442891,1.1252054746610685],[1619227453005,1.1180402148239843],[1619230457650,1.1053157940491964],[1619233312657,1.1298614827999067],[1619236396985,1.1397639443740273],[1619239424178,1.1359274669865476],[1619242469061,1.140215819313516],[1619245387650,1.144685119290531],[1619248338390,1.1276405657214676],[1619251357302,1.1279390040404729],[1619254396800,1.1362663708234912],[1619259112000,1.1049392779824312]]

【问题讨论】：

标签： javascript html charts apexcharts

【解决方案1】：

它在两个图表上都显示，只是在第二个图表上它只显示一个。这是因为y轴的刻度量是根据数据自动计算出来的，但是你可以使用tickAmount来设置：

yaxis: {
  tickAmount: 5
}

let InfoinfoDisplay_color = "rgba(1, 100, 148, 0.95)";
let InfoHovercolor = "rgba(1, 100, 148, 0.95)";


var chartData = [
  [1619172418188, 1.0476013869111795],
  [1619175587292, 1.1198232589571675],
  [1619178853930, 1.157646111247407],
  [1619181915314, 1.1093982047739799],
  [1619184749901, 1.0798464813053623],
  [1619187818296, 1.1086855020268924],
  [1619190782881, 1.096000360488148],
  [1619193860463, 1.10672232619161],
  [1619196767038, 1.0988803848560535],
  [1619199743916, 1.0981656379540496],
  [1619202862866, 1.093804129207881],
  [1619205891702, 1.1077756492342723],
  [1619208843234, 1.1481203368627158],
  [1619211742488, 1.1172375471919378],
  [1619214829414, 1.110618846651946],
  [1619217810168, 1.1233988199629148],
  [1619220788002, 1.1413939139175715],
  [1619223899525, 1.1399773736160672],
  [1619226882428, 1.1191436618449704],
  [1619229755380, 1.12186472542115],
  [1619232856982, 1.128074522521124],
  [1619235801347, 1.1467409723241526],
  [1619238745617, 1.1333216765168754],
  [1619241860850, 1.141486724409456],
  [1619244733747, 1.1459909043812324],
  [1619247714927, 1.1413474565269073],
  [1619250869567, 1.127054245243459],
  [1619253888057, 1.1406556175192146],
  [1619258468000, 1.1208390731103737]
];

var chartDisplay = new ApexCharts(document.querySelector("#coinDetailChart"), {
  chart: {
    type: 'area',
    stacked: false,
    height: 350,
    zoom: {
      type: 'x',
      enabled: true,
      autoScaleYaxis: true
    },
    toolbar: {
      autoSelected: 'zoom'
    },
  },
  dataLabels: {
    enabled: false
  },
  markers: {
    size: 0,
  },
  title: {
    text: '<%=data[0].name%> Price Movement',
    align: 'left',
    style: {
      color: 'white'
    },
  },
  series: [{
    name: "$ ",
    data: chartData
  }],
  colors: [InfoinfoDisplay_color],
  opacity: 1,
  type: 'solid',
  fill: {
    colors: [InfoinfoDisplay_color],
    type: 'gradient',
    gradient: {
      type: "vertical",
      opacityFrom: 1,
      opacityTo: 1,
      gradientToColors: [InfoHovercolor],
      stops: [25, 100]
    }
  },
  yaxis: {
    labels: {
      style: {
        colors: 'white',
      },
      show: true,
      offsetX: 0,
      offsetY: 0,
      rotate: 0,
      formatter: function(val) {
        return (val.toFixed(3));
      },
    },
    tickAmount: 5
  },
  xaxis: {
    type: 'datetime',
    crosshairs: {
      width: 1
    },
    labels: {
      style: {
        colors: 'white',
      },
    },
  },

});

chartDisplay.render();

* {
  background: black
}

<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
  <div id="coinDetailChart"></div>
</body>

【讨论】：