Chart.JS-错误的Y轴

debugcn 发表于 Dev

华莱士·罗勒

我在Chart.JS中添加了两个y轴，但我相信两条直线都仅由左轴引用。查看下面的图像，其中工具提示显示了2019年的点。红线和蓝线均由左轴引用。我希望其中一个可以被右轴引用。

                // set default to straight lines - no curves
                Chart.defaults.global.elements.line.tension = 0.5;
                // set default no fill beneath the line
                Chart.defaults.global.elements.line.fill = false;

                // stacked bar with 2 unstacked lines - nope
                var barChartData = {
                labels: ['2016', '2017', '2018', '2019'],
                datasets: [{
                    type: 'line',
                    label: 'Red',
                    id: "y-axis-0",
                    backgroundColor: "rgba(51,51,51,0.5)",
                    borderColor: 'rgba(255, 0, 0, 1)',
                    data: [1500, 2600, 4700, 5800]
                },{
                    type: 'line',
                    label: 'Red Top',
                    id: "y-axis-0",
                    backgroundColor: "rgba(255, 0, 0, 0.3)",
                    borderColor: "transparent",
                    pointRadius: 0,
                    fill: 0,
                    tension: 0.5,
                    data: [1600, 2700, 4800, 5900]
                },{
                    type: 'line',
                    label: 'Red Bottom',
                    id: "y-axis-0",
                    backgroundColor: "rgba(255, 0, 0, 0.3)",
                    borderColor: "transparent",
                    pointRadius: 0,
                    fill: 0,
                    tension: 0.5,
                    data: [1400, 2500, 4600, 5700]
                }, {
                    type: 'line',
                    label: 'Blue',
                    id: "y-axis-1",
                    backgroundColor: "rgba(151,187,205,0.5)",
                    borderColor: "rgba(44, 130, 201, 1)",
                    data: [5000, 3000, 1000, 0]
                }, {
                    type: 'line',
                    label: 'Blue Top',
                    id: "y-axis-1",
                    backgroundColor: "rgba(44, 130, 201, 0.3)",
                    borderColor: "transparent",
                    pointRadius: 0.5,
                    fill: 3,
                    tension: 0,
                    data: [5100, 3100, 1100, 100]
                }, {
                    type: 'line',
                    label: 'Blue Bottom',
                    id: "y-axis-1",
                    backgroundColor: "rgba(44, 130, 201, 0.3)",
                    borderColor: "transparent",
                    pointRadius: 0,
                    fill: 3,
                    tension: 0.5,
                    data: [4900, 2900, 900, 0]
                }
                ]
                };


                var ctx = document.getElementById("myChart");
                // allocate and initialize a chart
                var ch = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    title: {
                    display: false,
                    text: "Chart.js Bar Chart - Stacked"
                    },
                    tooltips: {
                    mode: 'label'
                    },
                    responsive: true,
                    scales: {
                    yAxes: [{
                        stacked: false,
                        position: "left",
                        id: "y-axis-0",
                        ticks: {
                        beginAtZero: true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Left'
                        },
                    }, {
                        stacked: false,
                        position: "right",
                        id: "y-axis-1",
                        ticks: {
                            min: -1000,
                            max: 8000,
                            stepSize: 1000,
                            beginAtZero: true,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Right'
                        },
                    }, ]
                    },
                    legend: {
                    display: false,
                    },
                }
                });

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<html>
    <head>
        <script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>
    </head>
    <body>
        <canvas id="myChart" width="600px" height="400px"></canvas>
    </body>
</html>

华莱士·罗勒

我能够通过替换id为yAxisIDat数据集来修复它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。