Apexcharts - 使用不同 y 轴刻度建模多个系列（超过 2 个）

Question

我们一直在尝试通过 Apexcharts 找到一种方法来做到这一点。

我们有多个系列，它们具有共享的 x 轴（日期），但 y 轴比例不同，我们正在尝试对其进行标准化，以便我们可以一起显示多个数据点。

我们能找到的唯一示例是最多仅支持 2 个系列： https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/

我们的系列可能具有以下值：

• [10,12,14,15,16]
• [0.3,0.4,0.6,0.7,0.4]
• [131,127,150,129,144]

我们不能让它们共享相同的 y 轴，否则第二个系列会看起来非常压扁。不知何故，我们正在尝试找到一种方法，以在同一张图表上直观地显示所有这 3 个因素，同时使个体差异仍然可见。

所以我们实际上正在做的是“标准化”不同的 y 轴范围，同时仍然保留准确的原始值。

我们也对 Apexcharts 以外的替代方案持开放态度。

Answer 1

您是否想在相同的 y 轴刻度上绘制两个系列？ 如果是这样，这里有一个解决方法用两个 y 轴建模多个系列 否则，如果您只是想绘制与系列一样多的轴，这里有一个示例为每个系列使用一个轴来建模多个系列

第一个例子：

var options = {
    series: [
        {
            name: "Serie 1",
            type: "line",
            data: [10,12,14,15,16]
        },
        {
            name: "Serie 2",
            type: "line",
            data: [0.3,0.4,0.6,0.7,0.4]
        },
        {
            name: "Serie 3",
            type: "line",
            data: [131,127,150,129,144]
        }
    ],
    chart: {
        height: 350,
        type: "line",
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 2
    },
    xaxis: {
        categories: [2009, 2010, 2011, 2012, 2013]
    },
    yaxis: [
        {
            seriesName: "Serie 1",
            min:0,
            max:200,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 1",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 2",
            opposite: true,
            min: 0,
            max: 1,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#FEB019"
            },
            labels: {
                style: {
                    colors: ["#FEB019"]
                }
            },
            title: {
                text: "Axe 2",
                style: {
                    color: "#FEB019"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 3",
            min: 0,
            max: 200,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: false
            },
            labels: {
                show:false,
            },
            title: {
                text: "",
            },
            tooltip: {
                enabled: false
            }
        }
    ],
    legend: {
        horizontalAlign: "left",
        offsetX: 40
    }
};

第二个例子：

var options = {
    series: [
        {
            name: "Serie 1",
            type: "line",
            data: [10,12,14,15,16]
        },
        {
            name: "Serie 2",
            type: "line",
            data: [0.3,0.4,0.6,0.7,0.4]
        },
        {
            name: "Serie 3",
            type: "line",
            data: [131,127,150,129,144]
        }
    ],
    chart: {
        height: 350,
        type: "line",
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 2
    },
    xaxis: {
        categories: [2009, 2010, 2011, 2012, 2013]
    },
    yaxis: [
        {
            seriesName: "Serie 1",
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 1",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 2",
            opposite: true,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#FEB019"
            },
            labels: {
                style: {
                    colors: ["#FEB019"]
                }
            },
            title: {
                text: "Axe 2",
                style: {
                    color: "#FEB019"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 3",
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 3",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
    ],
    legend: {
        horizontalAlign: "left",
        offsetX: 40
    }
};

Answer 2

要配置具有多个Y轴的图表，您需要在图表选项中定义yaxis属性。每个 Y 轴可以有自己的一组配置，例如位置、标题和缩放比例。这是一个基本示例：

var options = {
  chart: {
    type: 'line'
  },
  series: [
    {
      name: 'Cumulative Receipt',
      data: [30, 40, 45, 50, 49, 60, 70]
    },
    {
      name: 'Cumulative Projected Inventory',
      data: [20, 30, 35, 40, 39, 50, 60]
    },
    {
      name: 'Week-wise Receipt',
      data: [10, 20, 25, 30, 29, 40, 50]
    }
  ],
  yaxis: [
    {
      title: {
        text: 'Cumulative Metrics'
      },
      seriesName: ['Cumulative Receipt', 'Cumulative Projected Inventory'],
      opposite: false // Left Y-axis
    },
    {
      title: {
        text: 'Weekly Metrics'
      },
      seriesName: 'Week-wise Receipt',
      opposite: true // Right Y-axis
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

输出

在此输入图片描述