apexcharts 在散点图之上绘制折线图

Question

目前使用“散点图”来显示我的 xy 坐标，效果很好。另一个要求是在散点图的顶部绘制一个基于平均数的折线图。这可能吗？

链接到散点图 - https://apexcharts.com/angular-chart-demos/scatter-charts/basic/

示例图 -

Answer 1

是的，你可以画画混合图表与 ApexCharts。你甚至有你正在寻找的演示：Line Scatter – ApexCharts.js

为了方便起见，我把演示放在这里：

let options = {
  series: [{
    name: 'Points',
    type: 'scatter',
    data: [{
      x: 1,
      y: 2.14
    }, {
      x: 1.2,
      y: 2.19
    }, {
      x: 1.8,
      y: 2.43
    }, {
      x: 2.3,
      y: 3.8
    }, {
      x: 2.6,
      y: 4.14
    }, {
      x: 2.9,
      y: 5.4
    }, {
      x: 3.2,
      y: 5.8
    }, {
      x: 3.8,
      y: 6.04
    }, {
      x: 4.55,
      y: 6.77
    }, {
      x: 4.9,
      y: 8.1
    }, {
      x: 5.1,
      y: 9.4
    }, {
      x: 7.1,
      y: 7.14
    },{
      x: 9.18,
      y: 8.4
    }]
  }, {
    name: 'Line',
    type: 'line',
    data: [{
      x: 1,
      y: 2
    }, {
      x: 2,
      y: 3
    }, {
      x: 3,
      y: 4
    }, {
      x: 4,
      y: 5
    }, {
      x: 5,
      y: 6
    }, {
      x: 6,
      y: 7
    }, {
      x: 7,
      y: 8
    }, {
      x: 8,
      y: 9
    }, {
      x: 9,
      y: 10
    }, {
      x: 10,
      y: 11
    }]
  }],
  chart: {
    height: 350,
    type: 'line'
  },
  fill: {
    type: 'solid'
  },
  markers: {
    size: [6, 0]
  },
  tooltip: {
    shared: false,
    intersect: true
  },
  legend: {
    show: false
  },
  xaxis: {
    type: 'numeric',
    min: 0,
    max: 12,
    tickAmount: 12
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

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

<div id="chart"></div>

这个特定示例尚未使用 Angular 进行集成，但我认为您可以轻松完成。如果您需要更多灵感，请查看此页面：Angular Mixed Chart / Combination Chart Examples – ApexCharts.js