如何创建具有锁定y轴的水平滚动Chart.js折线图？

Question

我想创建一个折线图,Chart.Js但Y-Axis滚动时不动.

我假设我可以使用固定宽度,并将其放在容器div中overflow:auto,但随后Y-axis信息附加到画布并滚动.

我没有在文档中看到这方面的参数或选项.有任何想法吗？

谢谢

Answer 1

可滚动图表

你几乎走在正确的轨道上.如果添加另一个包装器和y轴,则完成.

预习

CSS

.chartWrapper {
    position: relative;
}

.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}

.chartAreaWrapper {
    width: 600px;
    overflow-x: scroll;
}

HTML

<div class="chartWrapper">
    <div class="chartAreaWrapper">
        <canvas id="myChart" height="300" width="1200"></canvas>
    </div>
    <canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

脚本

...

new Chart(ctx).Line(data, {
    onAnimationComplete: function () {
        var sourceCanvas = this.chart.ctx.canvas;
        // the -5 is so that we don't copy the edges of the line
        var copyWidth = this.scale.xScalePaddingLeft - 5;
        // the +5 is so that the bottommost y axis label is not clipped off
        // we could factor this in using measureText if we wanted to be generic
        var copyHeight = this.scale.endPoint + 5;
        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
        targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
    }
});

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

Answer 2

Chart.js 2.7.2:https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

此方法处理不同的DPR设置,并将缩放轴以匹配Chart.js应用于其图表的缩放.它还在Chart.js绘制的原始Y轴上调用.clearRect(),清除定义区域中的像素,这意味着没有重复的轴或重叠.

CSS:

.chartWrapper {
 position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

HTML

<div class="chartWrapper">
    <div class="chartAreaWrapper">
        <div class="chartAreaWrapper2">
          <canvas id="chart-Test" height="300" width="1200"></canvas>
        </div>
     </div>
     <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

JS:

    $(function () {
    var rectangleSet = false;

    var canvasTest = $('#chart-Test');
    var chartTest = new Chart(canvasTest, {
        type: 'bar',
        data: chartData,
        maintainAspectRatio: false,
        responsive: true,
        options: {
            tooltips: {
                titleFontSize: 0,
                titleMarginBottom: 0,
                bodyFontSize: 12
            },
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    ticks: {
                        fontSize: 12,
                        display: false
                    }
                }],
                yAxes: [{
                    ticks: {
                        fontSize: 12,
                        beginAtZero: true
                    }
                }]
            },
            animation: {
                onComplete: function () {
                    if (!rectangleSet) {
                        var scale = window.devicePixelRatio;                       

                        var sourceCanvas = chartTest.chart.canvas;
                        var copyWidth = chartTest.scales['y-axis-0'].width - 10;
                        var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;

                        var targetCtx = document.getElementById("axis-Test").getContext("2d");

                        targetCtx.scale(scale, scale);
                        targetCtx.canvas.width = copyWidth * scale;
                        targetCtx.canvas.height = copyHeight * scale;

                        targetCtx.canvas.style.width = `${copyWidth}px`;
                        targetCtx.canvas.style.height = `${copyHeight}px`;
                        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale);

                        var sourceCtx = sourceCanvas.getContext('2d');

                        // Normalize coordinate system to use css pixels.

                        sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);
                        rectangleSet = true;
                    }
                },
                onProgress: function () {
                    if (rectangleSet === true) {
                        var copyWidth = chartTest.scales['y-axis-0'].width;
                        var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;

                        var sourceCtx = chartTest.chart.canvas.getContext('2d');
                        sourceCtx.clearRect(0, 0, copyWidth, copyHeight);
                    }
                }
            }
        }
    });

Answer 3

使用最新版本（2.4.0）这对我有用：

HTML

<div style="width: 100%; overflow-x: auto; overflow-y: hidden">
  <div style="width: 3000px; height: 300px">
    <canvas id="chart1" height="300" width="0"></canvas>
  </div>
</div>

您还width可以根据数据的长度动态计算。例如在 VueJS 中，您可以按如下方式执行（考虑30px每个条目）：

VueJS

<div style="width: 100%; overflow-x: auto;">
  <div :style="{width: (data.length * 30) + 'px', height: '300px'}">
    <canvas id="chart1" height="300" width="0"></canvas>
  </div>
</div>

Answer 4

这是包含 5000 个数据点的完整工作示例，您可以根据需要添加任意数量的数据。滚动条代码取自互联网，因此您可以根据需要进行修改。该示例还包含一个具有多个系列的滚动条。（代码已注释）

带滚动条的图表

    <!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
    <div style="width: 500pt;">
    <canvas id="myChart" style="display: block;width: 1333px;height: 369px;"></canvas>
    <section class="range-slider">
        <span class="rangeValues"></span>
        <input value="1" min="1" max="" type="range" />
        <input value="10" min="1" max="" type="range" />
    </section>
    </div>
</body>
<style>
    section.range-slider {
    position: relative;
    width: 700px;
    height: 300px;
    float: left;
    text-align: center;
    }
    section.range-slider input[type="range"] {
    pointer-events: none;
    position: absolute;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 14px;
    background: #f1efef;
    box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
    -webkit-box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
    overflow: hidden;
    left: 0;
    top: 50px;
    width: 700px;
    outline: none;
    height: 20px;
    margin: 0;
    padding: 0;
    }
    section.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 14px;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #dad8da),
        color-stop(100%, #413f41)
    );
    /* android <= 2.2 */
    background-image: -webkit-linear-gradient(top, #dad8da 0, #413f41 100%);
    /* older mobile safari and android > 2.2 */
    background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
    /* W3C */
    }
    section.range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 14px;
    background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
    /* W3C */
    }
    section.range-slider input[type="range"]::-ms-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -ms-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 14px;
    border: 0;
    background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
    /* W3C */
    }
    section.range-slider input[type="range"]::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: black;
    border: 0;
    }
    section.range-slider input[type="range"]:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
    }
    section.range-slider input[type="range"]::-moz-focus-outer {
    border: 0;
    }
</style>
</html>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>



var ctx = document.getElementById("myChart").getContext("2d");
    // create dummt data

    var labels = [];
    var values = [];

    for(var i=0;i<5000;i++){
        labels.push("Label"+i)
        values.push(Math.random()*30)
    }  
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: "bar",
    // The data for our dataset
    data: {
    labels: labels,
    datasets: [
        {
        label: "My First dataset",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: values,
        },
    ],
    },
    // Configuration options go here
    options: {},
});


function getVals() {
    // Get slider values
    var parent = this.parentNode;
    var slides = parent.getElementsByTagName("input");
    var min = parseFloat(slides[0].value);
    var max = parseFloat(slides[1].value);
    // Neither slider will clip the other, so make sure we determine which is larger
    if (min > max) {
    var tmp = max;
    max = min;
    min = tmp;}

        var label = [];
        var value = [];

        label = JSON.parse(JSON.stringify(labels)).slice(min, max);

        //var datasets = Data.datasets;
        // IF YOU HAVE MULTIPLE SERIESES

        // ChartObj.data.labels = label;
        // for (var i = 0; i < datasets.length; i++) {
        //     values = datasets[i].data.slice(min, max);
        //     ChartObj.data.datasets[i].data = values;
        // }
        // ChartObj.update();
        value = JSON.parse(JSON.stringify(values)).slice(min, max);
        chart.data.labels = label;
        chart.data.datasets[0].data = value;
        chart.update();

    var displayElement = parent.getElementsByClassName("rangeValues")[0];
    displayElement.innerHTML = "Min : " + min + " Max : " + max;
}

// Initialize Sliders
var sliderSections = document.getElementsByClassName("range-slider");
for (var x = 0; x < sliderSections.length; x++) {
    var sliders = sliderSections[x].getElementsByTagName("input");
    for (var y = 0; y < sliders.length; y++) {
    if (sliders[y].type === "range") {
        sliders[y].oninput = getVals;
        sliders[y].max=JSON.parse(JSON.stringify(labels)).length;
        // Manually trigger event first time to display values
        sliders[y].oninput();
    }
    }
}




</script>