是否有canvasChart.js的最大宽度可以绘制图表？

Question

我最近开始使用 chart.js 和一个项目的反应包装器。当我构建这个宽度为 20000 像素的图表时，条形图在 16390 像素长度后停止出现在屏幕上。

我的图表是可滚动的，而且我有一个很大的数据集，因此 canvas 有很大的长度。所以我很困惑，如果有一些长度限制 chart.js 可以将它的 canvas 绘制到。

这是我的代码，用于复制附带的屏幕截图的问题。

import React, { Component, createRef } from 'react'
import ChartJsComponent from "react-chartjs-2";

class ScrollableChartJsPlugin extends Component {
    chartRef = createRef()
    render(){ //this will simply return the chart
        return  <ChartJsComponent 
                    ref={this.chartRef}
                    {...this.props}
                />
    }

}

export default ScrollableChartJsPlugin;

import React, { Component } from 'react'
import ScrollableChart from "../../components/ScrollableChartJSPlugin";

class Observe extends Component {
    
    getRandomLabel = () => {
        let data = [];
        for(let i = 0; i<1000; i++){
            data.push(`Label ${i}`)
        }

        return data;
    }

    render(){ 

        var data =  {
            labels: this.getRandomLabel(),
            datasets: [
                {
                    backgroundColor: 'rgba(237, 77, 77,1)',
                    borderColor: 'rgba(237, 77, 77,1)',
                    borderWidth: 1,
                    hoverBackgroundColor: 'rgba(237, 77, 77,0.8)',
                    hoverBorderColor: 'rgba(237, 77, 77,1)',
                    data: this.getRandomLabel().map(el => 1000) //i am taking same value for all the bars as it'll be easier to catch when bars disappears
                }
            ]
        };
        var width = this.getRandomLabel().length * 50; //this will give each bar around 50px width and total width of the chart will go around 50000px
        return  <div style={{width: width}}>
                    <ScrollableChart
                        type={"bar"}
                        height={220}
                        width={width}
                        data={data}
                        getElementAtEvent={this.handleChartClick}
                        options={
                            {
                                maintainAspectRatio: false,
                                legend: {
                                    display: false
                                },
                                scales: {
                                    xAxes: [{
                                        gridLines: {
                                            display:false
                                        }
                                    }],
                                    yAxes: [{
                                        gridLines: {
                                            display:false
                                        }   
                                    }]
                                },
                                tooltips: {
                                    mode: 'index', 
                                    intersect: false
                                }
                            }
                        }
                    />
                </div>
    }

}

export default Observe;

以上代码生成的截图。

因此，如果 chart.js 中存在可绘制对象 canvas 的最大宽度限制，我能否使用适用于此的任何变通方法或任何修复来解决此问题。

谢谢

Answer 1

发帖给以后遇到类似问题的人。

经过过去两天的大量研究。我发现问题基本上出在浏览器上。

实际上，浏览器可以绘制 canvas 有一个限制，超过该限制，绘图命令将无法工作，图表也不会再被绘制。

查看下面的线程以了解详细信息。

Maximum size of a <canvas> element

这就是问题的详情。对于解决方案，在我们的例子中，我们从 api 中获取数据，然后显示在图表中，因此我们限制了我们可以保存的最大数据，并开始删除之前加载的元素，因为加载了更多数据。这对我们有用。

您还可以在 github 上查看有关此问题的帖子。

https://github.com/chartjs/Chart.js/issues/6068

是否有canvasChart.js的最大宽度可以绘制图表？

Is there a max width of canvas Chart.js can draw charts within?

javascript

reactjs

chart.js

react-chartjs