0

如果我将两个 Y 轴添加到 Apexchart，它会被推到包装器之外并且无法正确调整大小。我想在图表的左侧显示一个 Y 轴，在图表的右侧显示另一个。

我试图在我的开发工具中对其进行调试，但我确信这本身就是一个画布问题。

我提供了下面的片段，它显示了左侧 Y 轴和 Jan 数据是如何超出范围的。

var yearMapOptions = {
  chart: {
    fontFamily: "'Varela Round', sans-serif",
    foreColor: '#2e1a6d',
    toolbar: {
      show: false
    },
    height: "100%",
    stacked: false
  },
  colors: ['#2e1a6d', '#47bfb6', '#f37b94', '#ebf394'],
  dataLabels: {
    enabled: false
  },
  series: [{
    name: 'Net Pips',
    type: 'line',
    data: [-10, 17, 39, -4, 63, -27, 55, 290, -83, 26, -45, 17],
  }, {
    name: 'Net Profit',
    type: 'line',
    data: [-35, 45, 190, -70, -50, 36, -80, 59, -29, 62, -65, 70]
  }, {
    name: 'Total Volume',
    type: 'column',
    data: [20, 60, 35, 57, 330, 30, 660, 58, 58, 230, 70, 120]
  }, {
    name: 'Total Trades',
    type: 'column',
    data: [6, 23, 11, 8, 33, 4, 57, 13, 13, 45, 17, 28]
  }],
  stroke: {
    width: [3, 3, 3, 3],
    curve: 'smooth'
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sep', 'Oct', 'Nov', 'Dec'],
  },
  yaxis: [{
      show: true,
      seriesName: 'Net Pips',
      opposite: true,
      tickAmount: 2,
      forceNiceScale: true,
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: true,
        color: '#00E396'
      },
      axisTicks: {
          show: false,
          borderType: 'solid',
          color: '#47bfb6',
      },
      labels: {
        style: {
          color: '#00E396',
        }
      },
      title: {
        text: undefined,
        style: {
          color: '#00E396',
        }
      },
    }, {
      show: true,
      seriesName: 'Net Profit',
      opposite: false,
      tickAmount: 2,
      forceNiceScale: true,
      axisTicks: {
          show: true,
          borderType: 'solid',
          color: '#2e1a6d',
      },
      axisBorder: {
          show: true,
          color: '#FEB019'
      },
      labels: {
          style: {
              color: '#FEB019',
          },
      },
      title: {
          text: undefined,
          style: {
              color: '#FEB019',
          }
      },
    }
  ],
  plotOptions: {
    bar: {
      horizontal: false,
      endingShape: 'rounded',
      barheight: '100%'
    }
  },
  tooltip: {
    fixed: {
      enabled: true,
      position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
      offsetY: 30,
      offsetX: 60
    },
  },
  grid: {
    show: false
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left',
    offsetY: 10
  }
};

var yearMapChart = new ApexCharts(
  document.querySelector("#yearMap"),
  yearMapOptions
);

yearMapChart.render();
.apexcharts-yaxis, .apexcharts-xaxis-label {
  font-weight: bold;
}

.yearMapWrapper {
  height: 100%;
  width: 80%;
  margin-left: 10%;
}
<html>
<body>

<div class="rowFiveCol2 layerStyles">
  <div class="yearMapWrapper">
    <div id="yearMap"></div>
  </div>
</div>


</body>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<html>

4

1 回答 1

1

移除grid: { show: false }使 y 轴可见。

PS：更改网格行为不应影响 y 轴。这似乎是 ApexCharts 中的一个错误，很快就会得到解决。

于 2019-12-25T18:29:12.253 回答