chart.js 相关问题

如何使用Chart.js为折线图上的数据点添加脉动动画？

正如问题中提到的，我正在使用 Charts.js 库。就我而言，我想创建一个折线图。折线图有一些数据点，我想通过给它们提供动画来突出显示它们。 普...

构建一个 Angular 库，其中包含带有插件的 Chart.js 提供程序？

我正在尝试为 Chart.js 构建一个包含插件的 Angular 独立库。 似乎在注册插件时，chart.js 会修改 ChartConfiguration 类型以便分配...

Chart.js core.js:6162 ERROR 错误：“line”不是已注册的控制器

const GainContext = this.gainRef.nativeElement.getContext('2d') GainContext.canvas.height = '300px' 新图表（gainContext，createChartConfig（gainConfig）） 函数 createChartConfig({类型，实验室...

Angular 组件 ngDestroy 没有被调用，图表也没有被销毁

我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码： 图表线.component.html 我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码： 图表线.component.html <!--chart container --> <div id="container"> <div id="scrollArea" class="CMI-ChartWrapper"> <div class="CMI-Chart"> <canvas baseChart #lineCanvas [id]="idChartname"></canvas> </div> </div> <canvas #targetCanvas id="chartAxis" height="400"></canvas> </div> 图表线.component.ts import { Component, OnInit, ViewChild, ElementRef, Input, OnDestroy } from "@angular/core"; import Chart from "chart.js/auto"; import ChartDataLabels from 'chartjs-plugin-datalabels'; import { DataServiceService } from 'src/app/services/data-service/data-service.service'; import { data } from '../data'; @Component({ selector: 'app-chart-line', templateUrl: './chart-line.component.html', styleUrls: ['./chart-line.component.scss'], }) export class ChartLineComponent implements OnInit, OnDestroy { @ViewChild('scroll') scroll: any; @ViewChild('targetCanvas', { static: true }) targetCanvasRef: ElementRef<HTMLCanvasElement>; @ViewChild("lineCanvas", { static: true }) lineCanvasRef: ElementRef<HTMLCanvasElement>; @Input('idname') idChartname: any; data: any; public myChart: Chart; @Input() resizedata: any; constructor(private dataservice: DataServiceService) { this.data = data[0].data1; this.dataservice.saveData(undefined); } ngOnInit() { if (this.resizedata != undefined) { this.idChartname = this.resizedata; } } ngAfterViewInit(): void { if (this.resizedata != undefined) { this.idChartname = this.resizedata; } this.dataservice.getFilteredData1.subscribe(message => { if (message) { var filteredData = this.filterFunction(message); this.renderChart(filteredData); } else { this.renderChart(this.data); } }); } filterFunction(filterParams: any) { var newChartData = [...this.data] if (filterParams.searchTerm == '') { var filteredYearData = [] filterParams.selectedYear.forEach(element => { var newItem = newChartData.filter(item => { return item['year'].toLowerCase().includes(element); }) filteredYearData.push(newItem[0]); }); return filteredYearData; } else if (filterParams.selectedYear == '' || filterParams.selectedYear == 'none') { var filterYear = newChartData.filter(item => { return item['year'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterProfit = newChartData.filter(item => { return item['profit'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) if (filterProfit.length == 0) { filterProfit = filterYear } var filterValue = newChartData.filter(item => { return item['value'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) if (filterValue.length == 0) { filterValue = filterProfit } return filterValue; } else { var filteredYearData = [] filterParams.selectedYear.forEach(element => { var newItem = newChartData.filter(item => { return item['year'].toLowerCase().includes(element); }) filteredYearData.push(newItem[0]); }); var filterYear = filteredYearData; var filterProfit = filterYear.filter(item => { return item['profit'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterValue = filterYear.filter(item => { return item['value'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterAllData if (filterProfit.length == 0 && filterValue.length != 0) { filterAllData = filterValue; } else if (filterProfit.length != 0 && filterValue.length == 0) { filterAllData = filterProfit; } else { filterAllData = filterValue; } return filterAllData; } } renderChart(data: any) { if (this.myChart) { this.myChart.destroy(); } Chart.register(ChartDataLabels); Chart.defaults.plugins.datalabels.anchor = 'start'; Chart.defaults.plugins.datalabels.align = 'start'; Chart.defaults.scale.grid.drawOnChartArea = false; Chart.defaults.scale.grid.drawOnChartArea = false; Chart.defaults.plugins.legend.labels.usePointStyle = true; const lineCanvas: any = document.getElementById(this.idChartname); const targetCanvas: any = document.getElementById("chartAxis"); if (lineCanvas != null && targetCanvas != null) { const ctx = targetCanvas.getContext("2d"); let rectangleSet = false; const targetCtx = targetCanvas.getContext("2d"); this.myChart = new Chart(ctx, { type: "line", data: { labels: data.map(x => x.year), datasets: [ { label: "Margin", fill: false, tension: 0.2, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "#006C5B", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", pointBorderColor: "#006C5B", pointBackgroundColor: "#006C5B", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "#006C5B", pointHoverBorderColor: "#003453", pointHoverBorderWidth: 2, pointRadius: 4, pointHitRadius: 10, spanGaps: false, data: data.map(x => x.value), borderWidth: 1 } ] }, /* chart options for design */ options: { maintainAspectRatio: false, aspectRatio: 1, responsive: true, scales: { x: { ticks: { // fontColor: 'black', // fontStyle: 'bold', }, grid: { color: 'rgba(171,171,171,1)', lineWidth: 2 }, title: { display: true, text: 'Year', // fontColor: 'black', font:{ family:'Helvetica Neue', size:14, } //fontStyle: 'bold', } }, y: { beginAtZero: true, ticks: { padding: 0, // stepSize:10, // fontColor: 'black', //fontStyle: 'bold', callback: function (value) { return value + "%" } }, grid: { color: 'rgba(171,171,171,1)', lineWidth: 2 }, title: { display: true, text: 'Margin (%)', // fontColor: 'black', font:{ family:'Helvetica Neue', size:14, } // fontStyle:'bold' }, } }, layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } }, plugins: { // ChartsJS DataLabels initialized here legend: { display: true, position: 'top', labels: { font: { family:'Helvetica Neue' } // fontColor: '#333', } }, datalabels: { formatter: function (value, context) { return value + "%" }, anchor: 'start', align: 'right', padding: { left: 0, right: 25, top: 40, bottom: 0 }, // formatter: Math.round, font: { // weight: 'bold', size: 12, family: 'Helvetica Neue' }, } }, animation: { onComplete: function () { if (!rectangleSet) { const scale = window.devicePixelRatio; const copyWidth = this.scales.y.width - 10; const copyHeight = this.scales.y.chart.height + this.scales.y.top + 10; targetCtx.scale(scale, scale); targetCtx.canvas.width = copyWidth; targetCtx.canvas.height = copyHeight; targetCtx.canvas.style.width = copyWidth + 'px'; targetCtx.canvas.style.height = copyHeight + 'px'; targetCtx.drawImage(lineCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale); // ctx.clearRect(0, 0, copyWidth, copyHeight); targetCtx.clearRect(0, 0, copyWidth, copyHeight); rectangleSet = true; } }, onProgress: function () { if (rectangleSet) { var copyWidth = this.scales.y.width; var copyHeight = this.scales.y.height + this.scales.y.top + 10; this.ctx.clearRect(0, 0, copyWidth, copyHeight); } }, }, }, }); } else { //this.myChart.update(); } } scrollleft() { document.getElementById('scrollArea').scrollLeft += -30; } scrollright() { document.getElementById('scrollArea').scrollLeft += 30; }; ngOnDestroy() { console.log("destroyed"); this.myChart.destroy(); //this.dataservice.saveData(undefined); } } 数据服务.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataServiceService { private filteredData = new BehaviorSubject<any>(""); getFilteredData1: Observable<any>; constructor() { this.getFilteredData1 = this.filteredData.asObservable(); } saveData(value) { this.filteredData.next(value); } } boundry.component.html <ion-card class="component-boundry content_class"> <!-- Charts --> <ng-container *ngIf="renderComponent=='chart-animated-line'"> <app-chart-animated-line></app-chart-animated-line> </ng-container> <ng-container *ngIf="renderComponent=='chart-bar'"> <app-chart-bar idname="barChartId1"></app-chart-bar> </ng-container> <ng-container *ngIf="renderComponent=='chart-line'"> <app-chart-line idname="lineChartId1"></app-chart-line> </ng-container> <ng-container *ngIf="renderComponent=='chart-multiple'"> <app-chart-multiple></app-chart-multiple> </ng-container> <!--<ng-container *ngIf="renderComponent=='chart-pie'"> <app-chart-pie></app-chart-pie> </ng-container>--> <ng-container *ngIf="renderComponent=='chart-bubble'"> <app-chart-bubble></app-chart-bubble> </ng-container> <!-- file explorer --> <ng-container *ngIf="renderComponent=='file-attachment'"> <app-attachment></app-attachment> </ng-container> </ion-card> 出现错误ERROR Error: Canvas is already in use. Chart with ID '11' must be destroyed before the canvas with ID 'chartAxis' can be reused. 因为它没有被 ngOnDestroy 方法破坏。使用 Angular 14 及以下版本和 Chart JS 2 可以正常工作。我不明白为什么 16 会发生这种情况。请帮忙解决。 正如错误所述，您正在硬编码 ID chartAxis，因此多个 html 元素将重复相同的 ID，这是错误的，您可以尝试以下更改，我们通过附加 将 ID 设置为动态-Axis 添加到您作为输入提供的动态 ID 的末尾，这可能会解决您的问题！ 图表线.component.html <!--chart container --> <div id="container"> <div id="scrollArea" class="CMI-ChartWrapper"> <div class="CMI-Chart"> <canvas baseChart #lineCanvas [id]="idChartname"></canvas> </div> </div> <canvas #targetCanvas [id]="idChartname+'-Axis'" height="400"></canvas> </div> 图表线.component.ts ... Chart.defaults.plugins.legend.labels.usePointStyle = true; ... const lineCanvas: any = document.getElementById(this.idChartname); const targetCanvas: any = document.getElementById(`${this.idChartname}-Axis`); // <-- changed here! ...

自定义 Chartjs 工具提示以仅显示 Y 值

有没有办法自定义chartjs工具提示以仅显示Y值而不覆盖所有回调？ 通读文档，似乎所有回调都必须是

Angular 13、Chart.js、ng2-chart 动态从 API 更新数据

我正在尝试从 API 动态更新图表数据。我正在使用 Angular 13 和 Chart.Js 3.7.1。 我没有从他们的文档中找到任何简单的示例。 我在网上发现了这个例子，因为我们...

chart.js 中是否有布尔选项可以关闭折线图的点显示？

在chart.js中是否有一个布尔选项可以关闭折线图中的点渲染？ 查看文档，有一个 pointRadius 选项，如果我们将其设置为零，则点

需要使用chart.js在分组条形图中表示给定数据，并且无法为每个条形指定名称

我有以下数据集 const javaData = [ { name: "NASC-02", type: "Interface", value: 6, bgColor: "red" }, { 名称：“NASC-03”，类型：“接口”，

增加chart.js中网格线之间的间距？

这个演示绘制网格线： https://stackblitz.com/edit/typescript-sfxm8f?file=index.ts 我们如何间隔网格线和刻度标签，以便仅针对 y 标签 [4,8,12,16,20] 显示网格线？

在 Angular 中使用 Chart.js 渐变插件并输入 Chartjs 选项？

这个纯 Typescript 配置一个使用渐变插件的类型化 Chart.js 对象实例，并且 Typescript 不会产生任何 linting 错误。 https://stackblitz.com/edit/typescript-9xhkzc?file...

Chart.js 堆叠条形图 - 按值对条形图中的值进行排序

我尝试使用 Chart.js 框架（版本 2.7）实现堆叠条形图，但遇到了以下问题：每个条形图中单个数据元素的绘制顺序与 JSON 结构中提供的顺序相同（

ChartJs 图表不会更新新值

首先，对于蹩脚的英语感到抱歉。 我使用 ChartJS 生成图表有一段时间了，但今天我偶然发现了一个问题，我似乎找不到答案。 我正在使用一个函数来...

如何在Chart.js中创建这样的图表？

我正在尝试使用 Chart.js 创建此图表。 挑战： 正如您在 x 轴上看到的那样，是类别。我希望该点位于中间。 我希望价值是最重要的。 我的...

BarChartModel 如何仅调整条形宽度而不更改整个图表

我无法仅更改条形的宽度。现在，图表工作正常，但我只需要调整条形的宽度，而不更改整个图表。我怎样才能做到这一点？ 普...

如何在laravel中使用chartjs-plugin-zoom

我正在尝试在我的 laravel 应用程序中使用 Chartjs-plugin-zoom 的功能，但我无法让它工作。 在刀片中，我通过 Cloudflare cdnjs 加载插件： <p>我正在尝试在我的 Laravel 应用程序中使用 <a href="https://www.chartjs.org/chartjs-plugin-zoom/latest/" rel="nofollow noreferrer">chartjs-plugin-zoom</a> 的功能，但我无法让它工作。</p> <p>在刀片中，我通过 Cloudflare cdnjs 加载插件：</p> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js&#34; integrity=&#34;some-long-string&#34; crossorigin=&#34;anonymous&#34; referrerpolicy=&#34;no-referrer&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js&#34; integrity=&#34;some-other-long-string&#34; crossorigin=&#34;anonymous&#34; referrerpolicy=&#34;no-referrer&#34;&gt;&lt;/script&gt; </code></pre> <p>然后在控制器中创建一些图表以将其提供给视图，设置一些插件特定选项：</p> <pre><code>$chart = new ReadOutChart(); // Fill chart with data $chart-&gt;options([ &#39;plugins&#39; =&gt; &#39;{zoom: {zoom: { wheel: {enabled: true, mode: \&#39;xy\&#39;}}}}&#39; ]); </code></pre> <p>其中 <pre><code>ReadOutChart</code></pre> 是基于 <pre><code>ConsoleTVs\Charts\Classes\Chartjs\Chart</code></pre> 类构建的图表。</p> <p>然后再次在刀片中我绘制图表：</p> <pre><code>&lt;div&gt; {!! $chart-&gt;container() !!} &lt;/div&gt; {!! $chart-&gt;script() !!} </code></pre> <p>图表显示正确，但插件功能似乎不起作用。 我很难做到这一点，因为我找不到很多关于在 Laravel 中使用 ChartJS 插件的文档。 我能找到的最有用的信息是<a href="https://stackoverflow.com/questions/55923003/how-to-use-plugins-in-chartjs-and-laravel-chart-consoletvs-chartsjs">这里</a>。</p> <p>您是否发现错误或知道如何使其正常工作？</p> <p>附加信息：</p> <ul> <li>laravel 版本：10.16.1</li> <li>控制台/图表版本：6.6.0</li> </ul> </question> <answer tick="false" vote="0"> <p>看起来你做的一切都是正确的。但是，问题可能在于如何将选项传递到图表。选项应该是关联数组，而不是字符串。</p> <pre><code>$chart-&gt;options([ &#39;plugins&#39; =&gt; [ &#39;zoom&#39; =&gt; [ &#39;zoom&#39; =&gt; [ &#39;wheel&#39; =&gt; [ &#39;enabled&#39; =&gt; true, &#39;mode&#39; =&gt; &#39;xy&#39; ] ] ] ] ]); </code></pre> </answer> </body></html>

如何提取具有反应属性的 Chart.js 图表作为 Svelte 中的单独组件？

我使用 npm create svelte@latest myapp 命令创建了一个骨架项目。接下来，我使用 npm install svelte-chartjs Chart.js 安装了 Chart.js 并创建了一个简单的条形图： 我使用 npm create svelte@latest myapp 命令创建了一个 Skeleton Project。接下来，我使用 npm install svelte-chartjs chart.js 安装了 Chart.js 并创建了一个简单的条形图： <script> import { Bar } from 'svelte-chartjs'; import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'; Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale); let numbers = [10, 20, 30]; let dates = ['1/1/2024', '1/2/2024', '1/3/2024']; $: data = { labels: dates, datasets: [ { label: 'Random Number', data: numbers, backgroundColor: 'rgba(98, 182, 239,0.4)', borderColor: 'rgba(98, 182, 239, 1)', borderWidth: 2 } ] }; let options = { responsive: true, maintainAspectRatio: false }; async function generate() { const response = await fetch('/generate'); let fetchedData = await response.json(); dates = fetchedData.dates; numbers = fetchedData.numbers; } </script> <h1>Fetch Data from API endpoint</h1> <button on:click={generate}>Request</button> <div> <Bar {data} {options} /> </div> 它从 /generate API 端点获取数据，该端点生成 1 到 10 个随机数，值范围为 10 到 30。此外，日期是根据随机数的长度生成的。如果按下 Request 按钮，条形图将更新其标签和数据值。输出如下所示： 更新 routes/generate/+server.js 和 numbers 数组的 dates 文件（模拟 API 端点）的内容如下： import { json } from '@sveltejs/kit'; function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); } function generateDates(numDates) { var today = new Date(); var dates = [] for (let i = 0; i < numDates; i++) { let dateString = today.toLocaleDateString('en-US'); dates.push(dateString); today.setDate(today.getDate() + 1); } return dates; } export function GET() { let length = getRandomNumber(1, 10); let numberData = Array.from({ length: length }, () => getRandomNumber(10, 30)); let dateData = generateDates(length); return json({dates: dateData, numbers: numberData}); } 从端点开始的数据长度在1到10之间随机选择，起始日期从当前日期开始。 API 端点的输出示例： {"日期":["2/8/2024","2/9/2024","2/10/2024"],"数字":[14,23,23]} 我想将 Bar 图表特定代码提取到单独的组件中，以提高可读性和可重用性。但是，在获取（生成）新数据时，labels 和 datasets[0].data 属性会发生反应性变化。 如何将具有反应属性的 Chart.js 图表提取为单独的组件？ 创建一个组件（例如BarChart.svelte）并提取图表特定的代码： <script> import { Bar } from 'svelte-chartjs'; import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'; Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale); export let dates = []; export let numbers = []; $: data = { labels: dates, datasets: [ { label: 'Random Number', data: numbers, backgroundColor: 'rgba(98, 182, 239,0.4)', borderColor: 'rgba(98, 182, 239, 1)', borderWidth: 2 } ] }; let options = { responsive: true, maintainAspectRatio: false }; </script> <Bar {data} {options} /> 您需要导出 dates 和 numbers 变量，以便可以从另一个组件更新它们。将新组件导入到原始组件中，并使用条形图的属性分配获取的值： <script> import BarChart from './BarChart.svelte'; let numbers = [10, 20, 30]; let dates = ['1/1/2024', '1/2/2024', '1/3/2024']; async function generate() { const response = await fetch('/generate'); let data = await response.json(); dates = data.dates; numbers = data.numbers; } </script> <h1>Fetch Data from API endpoint</h1> <button on:click={generate}>Request</button> <div> <BarChart {dates} {numbers} /> </div> 注意： BarChart.svelte 组件是在获取组件旁边创建的。以后如果有多个组件，建议创建一个components文件夹。

如何使用来自 Svelte 中 API 端点的数据更新图表？

我使用 Svelte JS Web 框架和 Chart.js 图表库来绘制条形图。我创建了一个 Skeleton 项目并安装了 svelte-chartjs 和 Chart.js 包： npm 安装...

react-chartjs-2 工具提示回调不起作用

我正在使用react-chartjs-2库在React中制作简单的图表。我尝试通过添加标题来自定义工具提示： 工具提示：{ 回调：{ 标签：（工具提示项，数据）=> { ...

如何在ChartJs中获取时间值的像素来画线？

如何获取日期值的像素？我想画一条线。但对于 x 轴，我有时间值。因此我无法获取 x 的像素。我正在尝试使用 getPixelForValue。但它又回来了...

Chartjs 4 - 填充堆积线和条形图之间的区域

我正在迁移到chart.js 4.4.1，在之前的版本（2.9.4）中，我能够使用附图中的颜色填充空白。 2.9.4 示例图像 在最新版本中，我...