[英]Apexcharts How to Swap xAxis to yAxis?
I have line chart use Apexcharts plugins, i want to swap position xAxis to yAxis and yAxis to xAxis.我有使用 Apexcharts 插件的折线图,我想将 position xAxis 交换为 yAxis,将 yAxis 交换为 xAxis。 Anyone know?, this is from example code Apexchart Line有人知道吗?,这是来自示例代码Apexchart Line
var options = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
},
annotations: {
xaxis:[{
x : 45,
strokeDashArray: 0,
borderColor: '#775DD0',
label: {
borderColor: '#775DD0',
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Anno Test',
}
}]
}
};
var chart = new ApexCharts(document.querySelector("#chartsimple"), options);
chart.render();
i want to swap xAxis (Months) to yAxis, and yAxis(number) to xAxis like this picture bellow:我想将 xAxis(月)交换为 yAxis,并将 yAxis(数字)交换为 xAxis,如下图所示:
Here's an example of how you would achieve what you want.这是您将如何实现您想要的目标的示例。 You'll have to change the data to suit your needs.您必须更改数据以满足您的需要。 There's many different ways to provide the data with ApexCharts. ApexCharts 提供数据的方式有很多种。 From the code that you copied from the documentation, all I did was experiment with the x and y values and change the type to type: scatter
根据您从文档中复制的代码,我所做的只是试验 x 和 y 值并将类型更改为type: scatter
let data = []; let i = 0; for (i = -10; i <= 10; i++) data.push({ x: i, y: (Math.sin(i/10) * 10) -10 }); var options = { series: [{ data: data }], chart: { height: 350, type: 'scatter', zoom: { enabled: false } }, dataLabels: { enabled: false }, title: { text: 'Modified Math.Sin', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, annotations: { xaxis: [{ x: 45, strokeDashArray: 0, borderColor: '#775DD0', label: { borderColor: '#775DD0', style: { color: '#fff', background: '#775DD0', }, text: 'Annotation', } }] } }; var chart = new ApexCharts(document.querySelector("#chartsimple"), options); chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chartsimple"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.