Apexcharts 平均值显示不正确答案

【问题标题】：Apexcharts average is not displayed correctlyApexcharts 平均值显示不正确
【发布时间】：2021-11-21 16:50:19
【问题描述】：

你能告诉我为什么位于 14 的平均值显示在底部，而不是行吗？

其他值，例如 15，显示在正确的位置（见屏幕截图）。

我尝试了不同的信息量选项，但仍然显示不正确。请告诉我。

const options = {
  series: [{
    name: 'Count',
    data: [1, 2, 1, 3, 1, 2, 0]
  }],
  chart: {
    height: 250,
    type: 'area',
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: false
  },

  stroke: {
    curve: 'smooth',
    colors: ["#6f42c1"],
  },
  grid: {
    show: false,
  },
  sparkline: {
    enabled: true
  },
  xaxis: {
    type: 'category',
    categories: ["11", "12", "13", "14", "15", "16", "17"],
    labels: {
      show: true,
      style: {
        colors: "#b7bbc8",
        fontSize: "10px",
        fontWeight: 900
      }
    }
  },
  yaxis: {
    show: false
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: "vertical",
      shadeIntensity: 1,
      opacityFrom: 1,
      opacityTo: 1,
      colorStops: [{
          offset: 0,
          color: "#6f42c1",
          opacity: 0.2
        },

        {
          offset: 100,
          color: "#fff",
          opacity: 0.5
        }
      ]
    }
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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

【问题讨论】：

标签： apexcharts

【解决方案1】：

当yaxis max 等于系列中的最大数字时会发生这种情况。试试这样的：

const options = {
  series: [{
    name: 'Count',
    data: [1, 2, 1, 3, 1, 2, 0]
  }],
  chart: {
    height: 250,
    type: 'area',
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: false
  },

  stroke: {
    curve: 'smooth',
    colors: ["#6f42c1"],
  },
  grid: {
    show: false,
  },
  sparkline: {
    enabled: true
  },
  xaxis: {
    type: 'category',
    categories: ["11", "12", "13", "14", "15", "16", "17"],
    labels: {
      show: true,
      style: {
        colors: "#b7bbc8",
        fontSize: "10px",
        fontWeight: 900
      }
    }
  },
  yaxis: {
    show: false,
    max:3.1
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: "vertical",
      shadeIntensity: 1,
      opacityFrom: 1,
      opacityTo: 1,
      colorStops: [{
          offset: 0,
          color: "#6f42c1",
          opacity: 0.2
        },

        {
          offset: 100,
          color: "#fff",
          opacity: 0.5
        }
      ]
    }
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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

【讨论】：