EugenioVLopes opened a new issue, #19887:
URL: https://github.com/apache/echarts/issues/19887
### What problem does this feature solve?
Hi, how can I improve this code to plot multiple X-Axis on the same chart?
Right now, the graph is being plotted, but the behavior is not as expected. Am
I doing something wrong? Below is part of the code.
setGraph(): void {
const colors = ["#5470C6", "#EE6666", "#FF9E4A", "#2B821D", "#005CAF"];
const series: any[] = [];
const grids: any[] = [];
if (this.selected_sensor.length > 0) {
for (const sensor of this.selected_sensor) {const i: number =
this.sensor_list.indexOf(sensor);const graph_type: string =this.chart_type[i]
== "line" ? "line" : "bar";const data_graph: any[] = [];
// Configuring graph data
if (Array.isArray(this.selected_graph_data.data)) {
for (const sample of this.selected_graph_data.data) {
data_graph.push({
x: sample[i],
y: sample[2],
});
}
console.log("Graph data: ", data_graph);
} else {
console.error("this.selected_graph_data.data is not an array");
}
// Configuring sensor series
const serie: any = {
name: sensor,
dataset: {
source: data_graph,
dimensions: ["x", "y"],
},
type: graph_type,
showSymbol: false,
barMinWidth: "90%",
itemStyle: {
color: colors[i % colors.length],
},
};
series.push(serie);
// Configuring chart grids
grids.push({
right: "5%",
left: "5%",
});
if (sensor == this.selected_sensor[this.selected_sensor.length - 1]) {
if (this.selected_sensor.length > 4) {
grids[grids.length - 1].bottom = "9%";
}
}
}
// Configuring Y axis of the chart
const yAxis: any[] = [
{
type: "value",
scale: true,
splitNumber: 8,
axisLabel: {
fontSize: 10,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
name: "Altitude (Km)",
nameGap: 40,
nameRotate: 90,
nameLocation: "middle",
nameTextStyle: {
textAlign: "right",
verticalAlign: "middle",
fontWeight: "bold",
fontSize: 15,
overflow: "hidden",
},
},
];
// Setting chart height
this.chart_height = { height: "100%" };
// Adding chart options settings
this.options = {
color: colors,
tooltip: {
trigger: "none",
axisPointer: {
type: "cross",
},
},
legend: {},
grid: grids,
xAxis: [],
yAxis: yAxis,
series: series,
};
// Adding individual X axis for each sensor
for (let i = 0; i < this.selected_sensor.length; i++) {
const sensorData: any[] = []; // Array for current sensor data
const sensorIndex = this.sensor_list.indexOf(
this.selected_sensor[i]
);
console.log("Selected Sensor: ", this.selected_sensor[i]);
for (const sample of this.selected_graph_data.data) {
sensorData.push(sample[sensorIndex]);
}
console.log("Sensor Data: ", sensorData);
this.options.xAxis.push({
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[sensorIndex % colors.length],
},
},
axisPointer: {
label: {
formatter: (params: any) => {
return (
"Sensor " +
(params.seriesData.length
? "：" + params.seriesData[0].data
: "")
);
},
},
},
data: sensorData.map((value: any) => ({ value })), // Sensor values
on X axis
});
// Adding current sensor data to corresponding series
this.options.series.push({
name: this.selected_sensor[i],
data: this.selected_graph_data.data.map(
(sample: any) => sample[2]
),
type: this.chart_type[sensorIndex] == "line" ? "line" : "bar",
showSymbol: false,
barMinWidth: "90%",
itemStyle: {
color: colors[sensorIndex % colors.length],
},
yAxisIndex: i,
});
}
### What does the proposed API look like?
I want the behavior to be correct and I can add multiple x axes, the data
apparently arriving correctly at:
however, when the graph is plotted it always stays on a straight line which
is not its expected behavior.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
