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 混合圖表/組合圖表示例 – ApexCharts.js