javascript - ChartJS 在滚动条上固定了 y 轴

Question

我想在滚动时固定 y 轴。我能够滚动 x 轴，但无法将 y 轴标签设置为固定，以便用户可以在滚动时查看标签。我正在使用 chartJS2.1.6。

同时尝试 https://jsfiddle.net/qmqmg82z/3/以下，x 轴标签上出现高度问题。

下面给出了我尝试过的内容。

<div class="chartAreaWrapper">
    <div class="chartArea-container chartOutr" id="canvasBody">
       <canvas style="height: 250px;" id="chartJSContainer"</canvas>
                </div>
                            </div>



          var options = {
            type: 'line',
            data: {
                labels: newDates.split(','),datasets: [{
                    label: 'Time',
                    data: newDuration.split(','),
                    borderWidth: 1,
                    fill: false,
                    borderColor: "#fff"
                }]
            },
            options: {
                responsive: true,
          maintainAspectRatio: false,
                    title: {
                        display: true,
                    },
              legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                ticks: {
                  beginAtZero: true,
                  suggestedMax: 1.30,
                  stepSize: .10,
                  fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red
               },
                        gridLines: {
                        color: 'rgba(255, 255, 255, 0.2)' // makes grid lines from y axis red
                        }
                    }],
                    xAxes: [{
              ticks: {
                beginAtZero: true,
                 fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red

             },
                        gridLines: {
                            display:false
                        }
                    }]
                }
            }
        }

        var ctx = document.getElementById('chartJSContainer').getContext('2d');
        new Chart(ctx, options);

Answer 1

作为替代方案，我编写了以下代码以快速修复。

Highcharts.chart('container', { chart: { type: 'bar', marginLeft: 150 }, title: { text: 'Most popular ideas by April 2016' }, subtitle: { text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>' }, xAxis: { type: 'category', title: { text: null }, min: 0, max: 4, scrollbar: { enabled: true }, tickLength: 0 }, yAxis: { min: 0, max: 1200, title: { text: 'Votes', align: 'high' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { enabled: false }, credits: { enabled: false }, series: [{ name: 'Votes', data: [ ["Gantt chart", 1000], ["Autocalculation and plotting of trend lines", 575], ["Allow navigator to have multiple data series", 523], ["Implement dynamic font size", 427], ["Multiple axis alignment control", 399], ["Stacked area (spline etc) in irregular datetime series", 309], ["Adapt chart height to legend height", 278], ["Export charts in excel sheet", 239], ["Toggle legend box", 235], ["Venn Diagram", 203], ["Add ability to change Rangeselector position", 182], ["Draggable legend box", 157], ["Sankey Diagram", 149], ["Add Navigation bar for Y-Axis in Highstock", 144], ["Grouped x-axis", 143], ["ReactJS plugin", 137], ["3D surface charts", 134], ["Draw lines over a stock chart, for analysis purpose", 118], ["Data module for database tables", 118], ["Draggable points", 117] ] }] });

============================================= =========================

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/yaxis/inverted-bar-scrollbar