在Svelte应用中使用Chart.js是否还有什么遗漏?

huangapple go评论76阅读模式
英文:

Is there anything missing to use Chart.js on a Svelte app?

问题

我是新手Svelte,尝试在SvelteKit页面上使用Chart.js显示图表遇到了问题。

首先,我尝试放置一个画布并确认它可以工作,如下面的代码所示,如果您注释掉onMount函数,则页面上会显示一个黑色画布。但是,在添加onMount部分后,它不显示任何内容。在浏览器和终端控制台中没有错误提示,所以我被困扰了。

我使用的是Sveltekit和Chart.js的最新版本。是否有什么遗漏?

<script>
	import { onMount } from 'svelte';
	import Chart from 'chart.js/auto';

	let data = [20, 100, 50, 12, 20, 130, 45];
	let labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
	let ctx;
	let canvas;

	onMount(() => {
		ctx = canvas.getContext('2d');
		var chart = new Chart(ctx, {
			type: 'bar',
			data: {
				labels: labels,
				datasets: [
					{
						label: 'Unit Sales',
						data: data
					}
				]
			}
		});
	});
</script>

<canvas bind:this={canvas} width={32} height={32} />

<style>
	canvas {
		width: 100%;
		height: 100%;
		background-color: #666;
	}
</style>

如果您评论部分代码,页面上会显示一个黑色画布,但添加了onMount部分后,无法显示图表。请问是否有遗漏?

英文:

I am new to Svelte and having trouble displaying a graph using Chart.js on a SvelteKit page.

First, I tried to put a canvas and confirmed that it worked, as the code below shows a black canvas on a page if you comment out the onMount function. However, it doesn't show anything after adding the onMount part. There is no error indication in the browser and terminal console, so I am stuck with it.

I use the latest version of Sveltekit and Chart.js. Is there anything missing?

&lt;script&gt;
	import { onMount } from &#39;svelte&#39;;
	import Chart from &#39;chart.js/auto&#39;;

	let data = [20, 100, 50, 12, 20, 130, 45];
	let labels = [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;];
	let ctx;
	let canvas;

	onMount(() =&gt; {
		ctx = canvas.getContext(&#39;2d&#39;);
		var chart = new Chart(ctx, {
			type: &#39;bar&#39;,
			data: {
				labels: labels,
				datasets: [
					{
						label: &#39;Unit Sales&#39;,
						data: data
					}
				]
			}
		});
	});
&lt;/script&gt;

&lt;canvas bind:this={canvas} width={32} height={32} /&gt;

&lt;style&gt;
	canvas {
		width: 100%;
		height: 100%;
		background-color: #666;
	}
&lt;/style&gt;

答案1

得分: 4

容器可能是问题所在。文档 中提到:

直接从 canvas 元素上检测画布大小的变化是无法完成的。Chart.js 使用其父容器来更新画布的渲染和显示大小。

例如,您可以将画布包装在一个 div 中并明确设置其大小:

div { width: 50vw; height: 50vh; }

(canvas 本身的 width/height 规则无效,Chart.js 会自动覆盖它们。)

英文:

The container is probably the problem. The docs state:

> Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes.

You can for example wrap the canvas in a div and size that explicitly:

div { width: 50vw; height: 50vh; }

(The rules for width/height of the canvas itself do nothing and will be automatically overridden by Chart.js.)

答案2

得分: 0

没有修改的情况下,将您的代码直接复制到 Svelte REPL 中似乎可以正常工作:

在Svelte应用中使用Chart.js是否还有什么遗漏?

因此,问题可能出在其他地方。

  • 浏览器开发控制台中是否有任何错误?
  • 终端中是否有错误?(您启动 SvelteKit 的地方。)

我猜测可能存在JS错误,可能与导入Chart.js有关。

  • 即使存在JS错误,您的页面也会呈现为空白画布。
  • 您确实安装了Chart.js模块吗?(npm install ...

这是我解决的一个类似问题:https://stackoverflow.com/a/71035686/117030

英文:

Your code, copied directly into a Svelte REPL without modification seems to work fine:

在Svelte应用中使用Chart.js是否还有什么遗漏?

So the issue is probably somewhere else.

  • Are there any errors in the browser dev console?
  • Errors in the terminal? (Where you started SvelteKit.)

My guess is there is a JS error, probably related to importing Chart.js.

  • Your page would render a blank canvas even if there were JS errors.
  • Did you actually install the Chart.js modules? (npm install ...)

Here is a similar problem I solved: https://stackoverflow.com/a/71035686/117030

huangapple
  • 本文由 发表于 2023年1月8日 22:27:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75048529.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定