Apexchart 在其 javascript 中添加工具提示时不显示 y 轴第二个

问题描述 投票：0回答：1

通常，我将数据附加到第二个 y 轴，因为数组工作得很好，但不知何故，当我开始将集合附加到数据时，它不再同时显示 2 个 y 轴。

我什至尝试添加 x, y 就像 apex 的文档所说的那样，但它也不起作用，尽管数据在 x 和 y 轴上匹配？

谢谢你帮助我 这是我的所有代码：

<!DOCTYPE html>
<html>
<head>
    <title>ApexCharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>

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

<script>
    // Sample data
    var m = {
        "01": 10, "02": 20, "03": 30, "04": 40, "05": 50, "06": 60,
        "07": 70, "08": 80, "09": 90, "10": 100, "11": 110, "12": 120
    };
    var l = {
        "01": 15, "02": 25, "03": 35, "04": 45, "05": 55, "06": 65,
        "07": 75, "08": 85, "09": 95, "10": 105, "11": 115, "12": 125
    };

    var options = {
        chart: {
            height: 400,
            type: 'line',
            stacked: false
        },
        dataLabels: {
            enabled: false
        },
        colors: ['#3b5998', '#cd201f'],
        series: [
            {
                name: 'Cost',
                type: 'column',
                data: [m["01"], m["02"], m["03"], m["04"], m["05"], m["06"],
                       m["07"], m["08"], m["09"], m["10"], m["11"], m["12"]]
            },
            {
                name: 'Total Business Trips',
                type: 'line', 
                data: [
                    { x: 'Month 1', y: l["01"], sum: m["01"] },
                    { x: 'Month 2', y: l["02"], sum: m["02"] },
                    { x: 'Month 3', y: l["03"], sum: m["03"] },
                    { x: 'Month 4', y: l["04"], sum: m["04"] },
                    { x: 'Month 5', y: l["05"], sum: m["05"] },
                    { x: 'Month 6', y: l["06"], sum: m["06"] },
                    { x: 'Month 7', y: l["07"], sum: m["07"] },
                    { x: 'Month 8', y: l["08"], sum: m["08"] },
                    { x: 'Month 9', y: l["09"], sum: m["09"] },
                    { x: 'Month 10', y: l["10"], sum: m["10"] },
                    { x: 'Month 11', y: l["11"], sum: m["11"] },
                    { x: 'Month 12', y: l["12"], sum: m["12"] }
                ] // errors in here
              
                // data: [l["01"], l["02"], l["03"], l["04"], l["05"], l["06"],
                //        l["07"], l["08"], l["09"], l["10"], l["11"], l["12"]] //acting normally, ok
            }
        ],
        stroke: {
            curve: 'smooth',
            width: 2
        },
        plotOptions: {
            bar: {
                borderRadius: 0,
                columnWidth: '45%'
            }
        },
        xaxis: {
            categories: ['Month 1', 'Month 2', 'Month 3', 'Month 4', 'Month 5', 'Month 6',
                         'Month 7', 'Month 8', 'Month 9', 'Month 10', 'Month 11', 'Month 12']
        },
        yaxis: [
            {
                seriesName: 'Cost',
                axisTicks: {
                    show: true
                },
                min: 0,
                max: function (max) {
                    return Math.floor(max + (max * 0.05));
                }
            },
            {
                opposite: true,
                seriesName: 'Total Business Trips',
                axisTicks: {
                    show: true
                },
                axisBorder: {
                    show: true
                },
                min: 0,
                max: function (max) {
                    return max + 1;
                }
            }
        ],
        tooltip: {
            shared: false,
            intersect: true,
            custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                var dataPoint = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
                if (seriesIndex === 1) { // Custom tooltip for "Total Business Trips" series
                    return `<div class="tooltip">
                                <span>Month: ${dataPoint.x}</span><br>
                                <span>Total Business Trips: ${dataPoint.y}</span><br>
                                <span>Cost: ${dataPoint.sum}</span>
                            </div>`;
                } else {
                    return `<div class="tooltip">
                                <span>Month: ${w.globals.labels[dataPointIndex]}</span><br>
                                <span>Cost: ${series[seriesIndex][dataPointIndex]}</span>
                            </div>`;
                }
            },
            x: {
                show: false
            }
        },
        chart: {
            toolbar: {
                show: false
            }
        },
        markers: {
            size: 3
        }
    };

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

</body>
</html>

javascript jquery apexcharts
1个回答
0
投票

问题似乎出在 y 轴的配置方式以及工具提示的设置方式上。添加自定义工具提示时，尤其是使用复杂数据结构的工具提示，有时会干扰 y 轴的正确渲染。这是配置的修订版本，应确保第二个 y 轴与自定义工具提示一起正确显示：

   <!DOCTYPE html>
    <html>
    <head>
        <title>ApexCharts Example</title>
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    </head>
    <body>
    
    <div id="chart"></div>
    
    <script>
        // Sample data
        var m = {
            "01": 10, "02": 20, "03": 30, "04": 40, "05": 50, "06": 60,
            "07": 70, "08": 80, "09": 90, "10": 100, "11": 110, "12": 120
        };
        var l = {
            "01": 15, "02": 25, "03": 35, "04": 45, "05": 55, "06": 65,
            "07": 75, "08": 85, "09": 95, "10": 105, "11": 115, "12": 125
        };
    
        var options = {
            chart: {
                height: 400,
                type: 'line',
                stacked: false
            },
            dataLabels: {
                enabled: false
            },
            colors: ['#3b5998', '#cd201f'],
            series: [
                {
                    name: 'Cost',
                    type: 'column',
                    data: [m["01"], m["02"], m["03"], m["04"], m["05"], m["06"],
                           m["07"], m["08"], m["09"], m["10"], m["11"], m["12"]]
                },
                {
                    name: 'Total Business Trips',
                    type: 'line', 
                    data: [
                        { x: 'Month 1', y: l["01"], sum: m["01"] },
                        { x: 'Month 2', y: l["02"], sum: m["02"] },
                        { x: 'Month 3', y: l["03"], sum: m["03"] },
                        { x: 'Month 4', y: l["04"], sum: m["04"] },
                        { x: 'Month 5', y: l["05"], sum: m["05"] },
                        { x: 'Month 6', y: l["06"], sum: m["06"] },
                        { x: 'Month 7', y: l["07"], sum: m["07"] },
                        { x: 'Month 8', y: l["08"], sum: m["08"] },
                        { x: 'Month 9', y: l["09"], sum: m["09"] },
                        { x: 'Month 10', y: l["10"], sum: m["10"] },
                        { x: 'Month 11', y: l["11"], sum: m["11"] },
                        { x: 'Month 12', y: l["12"], sum: m["12"] }
                    ]
                }
            ],
            stroke: {
                curve: 'smooth',
                width: 2
            },
            plotOptions: {
                bar: {
                    borderRadius: 0,
                    columnWidth: '45%'
                }
            },
            xaxis: {
                categories: ['Month 1', 'Month 2', 'Month 3', 'Month 4', 'Month 5', 'Month 6',
                             'Month 7', 'Month 8', 'Month 9', 'Month 10', 'Month 11', 'Month 12']
            },
            yaxis: [
                {
                    seriesName: 'Cost',
                    axisTicks: {
                        show: true
                    },
                    axisBorder: {
                        show: true,
                        color: '#3b5998'
                    },
                    labels: {
                        style: {
                            colors: '#3b5998',
                        }
                    },
                    title: {
                        text: "Cost",
                        style: {
                            color: '#3b5998',
                        }
                    },
                    min: 0,
                    max: function (max) {
                        return Math.floor(max + (max * 0.05));
                    }
                },
                {
                    opposite: true,
                    seriesName: 'Total Business Trips',
                    axisTicks: {
                        show: true
                    },
                    axisBorder: {
                        show: true,
                        color: '#cd201f'
                    },
                    labels: {
                        style: {
                            colors: '#cd201f',
                        }
                    },
                    title: {
                        text: "Total Business Trips",
                        style: {
                            color: '#cd201f',
                        }
                    },
                    min: 0,
                    max: function (max) {
                        return max + 1;
                    }
                }
            ],
            tooltip: {
                shared: false,
                intersect: true,
                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                    var dataPoint = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
                    if (seriesIndex === 1) { // Custom tooltip for "Total Business Trips" series
                        return `<div class="tooltip">
                                    <span>Month: ${dataPoint.x}</span><br>
                                    <span>Total Business Trips: ${dataPoint.y}</span><br>
                                    <span>Cost: ${dataPoint.sum}</span>
                                </div>`;
                    } else {
                        return `<div class="tooltip">
                                    <span>Month: ${w.globals.labels[dataPointIndex]}</span><br>
                                    <span>Cost: ${series[seriesIndex][dataPointIndex]}</span>
                                </div>`;
                    }
                },
                x: {
                    show: false
                }
            },
            chart: {
                toolbar: {
                    show: false
                }
            },
            markers: {
                size: 3
            }
        };
    
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
    
    </body>
    </html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.