Question

当我运行以下代码时，双轴折线图正在激活。如何在y轴（左侧和右侧）中设置标签或文本。

我正在使用https://nnnick.github.io/Chart.js/docs-v2/#line-chart-chart-options

        <!doctype html>
        <html>

        <head>
            <title>Line Chart Multiple Axes</title>
            <script src="../dist/Chart.bundle.js"></script>
            <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
            </style>
        </head>

        <body>
            <div style="width:75%;">
                <canvas id="canvas"></canvas>
            </div>

            <script>


                    var lineChartData = {
                        labels: ["January", "February", "March", "April", "May", "June", "July"],
                        datasets: [{
                            label: "My First dataset",
                            data: [50, 85, 56, 50, 60, 70, 80],
                            yAxisID: "y-axis-1",
                            borderColor :"#0ad4e6"
                        }, {
                            label: "My Second dataset",
                            data: [35, 45, 75, 40, 55, 73, 82],
                            yAxisID: "y-axis-2",
                            borderColor :"#f6c63e"
                        }]
                    };


                    window.onload = function() {
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myLine = Chart.Line(ctx, {
                            data: lineChartData,
                            options: {
                                responsive: true,
                                hoverMode: 'label',
                                stacked: false,
                                title:{
                                    display:false,
                                    text:'Chart.js Line Chart - Multi Axis'
                                },
                                animation:{
                                    duration:0
                                    },
                                    legend: {
                                    display:false,
                                        position: 'top',
                                    },
                                scales: {
                                    xAxes: [{
                                        display: true,
                                        gridLines: {
                                            offsetGridLines: false
                                        }
                                    }],
                                    yAxes: [{
                                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                        display: true,
                                        position: "left",
                                        id: "y-axis-1",
                                    }, {
                                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                        display: true,
                                        position: "right",
                                        id: "y-axis-2",

                                        // grid line settings
                                        gridLines: {
                                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                                        },
                                    }],
                                }
                            }
                        });
                    };


            </script>
        </body>

        </html>

需要显示像这样

Answer 1

您需要为轴设置collisionBulletBloque属性，如此

scaleLabel

但是，您无法通过调整选项来控制方向或执行垂直布局。

小提琴 - http://jsfiddle.net/r01tatnq/

在双轴图表js

1 个答案: