是否有canvasChart.js的最大宽度可以绘制图表?
Is there a max width of canvas Chart.js can draw charts within?
我最近开始使用 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 的最大宽度限制,我能否使用适用于此的任何变通方法或任何修复来解决此问题。
谢谢
发帖给以后遇到类似问题的人。
经过过去两天的大量研究。我发现问题基本上出在浏览器上。
实际上,浏览器可以绘制 canvas 有一个限制,超过该限制,绘图命令将无法工作,图表也不会再被绘制。
查看下面的线程以了解详细信息。
Maximum size of a <canvas> element
这就是问题的详情。对于解决方案,在我们的例子中,我们从 api 中获取数据,然后显示在图表中,因此我们限制了我们可以保存的最大数据,并开始删除之前加载的元素,因为加载了更多数据。
这对我们有用。
您还可以在 github 上查看有关此问题的帖子。
我最近开始使用 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 的最大宽度限制,我能否使用适用于此的任何变通方法或任何修复来解决此问题。
谢谢
发帖给以后遇到类似问题的人。
经过过去两天的大量研究。我发现问题基本上出在浏览器上。
实际上,浏览器可以绘制 canvas 有一个限制,超过该限制,绘图命令将无法工作,图表也不会再被绘制。
查看下面的线程以了解详细信息。
Maximum size of a <canvas> element
这就是问题的详情。对于解决方案,在我们的例子中,我们从 api 中获取数据,然后显示在图表中,因此我们限制了我们可以保存的最大数据,并开始删除之前加载的元素,因为加载了更多数据。 这对我们有用。
您还可以在 github 上查看有关此问题的帖子。