ApexCharts：折线图溢出 Y 轴

Question

希望你们一切都好。

我正在处理 Apex Charts 的折线图，除一个问题外，其他一切似乎都正常。

y 轴上的线 cross-over/overflows 而它们应该位于 y 轴之间。我已经尝试将 offsetX 添加到几乎所有内容，但它似乎不起作用。

我这里做错了什么？我该如何解决？

这里是CODEPEN。

这是问题的图片：

这是片段：

const lineChartEl = document.querySelector('#line-chart');


const lineChartOptions = {
  chart: {
    height: '380',
    width: "100%",
    type: "line",
    dropShadow: {
      enabled: true,
      enabledOnSeries: undefined,
      top: 0,
      left: 0,
      blur: 3,
      color: '#000',
      opacity: 0.35
    },
    foreColor: 'red', // numbers color
    toolbar: {
      show: true,
      offsetX: -30,
      offsetY: 0,
      tools: {
        download: true,
        selection: true,
        zoom: false,
        zoomin: false,
        zoomout: false,
        pan: false,
        reset: true | '<img src="/static/icons/reset.png" width="20">',
        customIcons: []
      },
      export: {
        csv: {
          filename: 'data',
          columnDelimiter: ',',
          headerCategory: 'category',
          headerValue: 'value',
          dateFormatter(timestamp) {
            return new Date(timestamp).toDateString()
          }
        },
        svg: {
          filename: 'data',
        },
        png: {
          filename: 'data',
        }
      }
    },
    autoSelected: 'zoom'
  },
  legend: {
    position: 'top'
  },
  grid: {
    show: true,
    padding: {
      left: 0,
      right: 0
    },
    borderColor: "rgba(0,0,0,0.1)"
  },
  colors: ['red', 'blue', 'yellow'],
  stroke: {
    width: 2,
  },
  tooltip: {
    theme: "dark"
  },
  series: [{
      name: "Cost",
      data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
    },
    {
      name: "Revenue",
      data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
    },
    {
      name: "Profit %",
      data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
    }
  ],
  yaxis: [{
      title: {
        text: "Cost / Revenue"
      },
      seriesName: "Cost",
      tickAmount: 5,
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
    {
      title: {
        text: "Kilograms"
      },
      seriesName: "Weight 1",
      show: false
    },
    {
      title: {
        text: "Profit %"
      },
      opposite: true,
      tickAmount: 5,
      seriesName: "Profit %",
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
  ],
  xaxis: {
    tickPlacement: 'on',
    axisBorder: {
      color: 'red',
    },
    axisTicks: {
      color: 'blue',
    },
    tooltip: {
      enabled: false,
    }
  },

};



const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

Answer 1

您可以通过删除 grid 选项中的 padding 来修复它：

const lineChartEl = document.querySelector('#line-chart');


const lineChartOptions = {
  chart: {
    height: '380',
    width: "100%",
    type: "line",
    dropShadow: {
      enabled: true,
      enabledOnSeries: undefined,
      top: 0,
      left: 0,
      blur: 3,
      color: '#000',
      opacity: 0.35
    },
    foreColor: 'red', // numbers color
    toolbar: {
      show: true,
      offsetX: -30,
      offsetY: 0,
      tools: {
        download: true,
        selection: true,
        zoom: false,
        zoomin: false,
        zoomout: false,
        pan: false,
        reset: true | '<img src="/static/icons/reset.png" width="20">',
        customIcons: []
      },
      export: {
        csv: {
          filename: 'data',
          columnDelimiter: ',',
          headerCategory: 'category',
          headerValue: 'value',
          dateFormatter(timestamp) {
            return new Date(timestamp).toDateString()
          }
        },
        svg: {
          filename: 'data',
        },
        png: {
          filename: 'data',
        }
      }
    },
    autoSelected: 'zoom'
  },
  legend: {
    position: 'top'
  },
  grid: {
    show: true,
    borderColor: "rgba(0,0,0,0.1)"
  },
  colors: ['red', 'blue', 'yellow'],
  stroke: {
    width: 2,
  },
  tooltip: {
    theme: "dark"
  },
  series: [{
      name: "Cost",
      data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
    },
    {
      name: "Revenue",
      data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
    },
    {
      name: "Profit %",
      data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
    }
  ],
  yaxis: [{
      title: {
        text: "Cost / Revenue"
      },
      seriesName: "Cost",
      tickAmount: 5,
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
    {
      title: {
        text: "Kilograms"
      },
      seriesName: "Weight 1",
      show: false
    },
    {
      title: {
        text: "Profit %"
      },
      opposite: true,
      tickAmount: 5,
      seriesName: "Profit %",
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
  ],
  xaxis: {
    tickPlacement: 'on',
    axisBorder: {
      color: 'red',
    },
    axisTicks: {
      color: 'blue',
    },
    tooltip: {
      enabled: false,
    }
  },

};



const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

ApexCharts：折线图溢出 Y 轴

ApexCharts: Line graph overflowing out of Y axes

javascript

jquery

charts

apexcharts