chart.js 相关问题

Chart.js是一个JavaScript库，用于创建包含在网页上的动画交互式图形

我正在尝试在纯JavaScript中使用chart.js，例如我的内容我正在尝试在纯 JavaScript 中使用 Chart.js，例如 <html> <body> <DIV>my contents</div> <script src="/static/defapp/js/chart.min.js"></script> <script> const myChart = new Chart(ctx, {...}); </script> </body> </html> 这显示了这样的错误 Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1) 然后我检查了这篇文章 . 它使用chart.umd.js，但是我在github中找不到chart.umd.js。我在哪里可以找到这个？将 Chart.js 与 CDN 结合使用：不要通过本地文件路径包含 Chart.js 库，而是尝试使用内容交付网络 (CDN) 链接来包含该库。这种方法有时可以帮助避免与模块语法相关的问题。 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 检查 Chart.js 版本兼容性：确保您使用的 Chart.js 版本与普通 JavaScript 用法兼容。旧版本的 Chart.js 可能不完全支持这种使用模式。将 Chart.js 代码包装在函数中：将 Chart.js 代码包装在函数内，并在文档加载后调用该函数。这可确保 Chart.js 库在尝试使用之前已完全加载。 <script> function createChart() { const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); } window.onload = createChart; </script> 使用Chart.js模块版本：如果您的项目支持 ES6 模块，请考虑使用 Chart.js 的模块版本。此版本旨在与现代 JavaScript 模块语法配合使用。 <script type="module"> import Chart from 'https://cdn.jsdelivr.net/npm/chart.js'; const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); </script> 检查浏览器兼容性：确保您使用的浏览器支持 Chart.js 使用的 JavaScript 功能。一些较旧的浏览器可能不完全支持现代 JavaScript 语法。

javascript chart.js

回答 1 投票 0

chartjs-plugin-dragdata 不适用于散点图

似乎chartjs-plugin-dragdata插件仅适用于折线图。但就我而言，我需要一张带有一个数据点的散点图，我想使其可拖动。但是拖放数据点后...

javascript chart.js

回答 2 投票 0

ChartJS 注释是否在 X 轴索引上呈现线条注释？

问题描述：我正在开发一个项目，需要在数据集中渲染一条垂直线以指示图表上的收支平衡点。 x 轴标签是根据...

javascript chart.js

回答 1 投票 0

使用 Alpine.js 和 Livewire 更新 Chart.js 标签会破坏图表

我正在使用 Alpine.js 和 Livewire 来动态更新 Chart.js 图表。我通过 Alpine 和 Livewire 每 30 秒更新一次图表。更新永远工作得很好......

chart.js laravel-livewire alpine.js

回答 1 投票 0

Chart.js v3 保持 2 个图表并排对齐

如何并排对齐两个图表，类似于 Stack Overflow 帖子 Chartjs - 使用 Chart.js v3 保持 2 个图表并排对齐？这是我的代码。如何并排对齐两个图表，类似于 Stack Overflow 帖子Chartjs - 使用 Chart.js v3 保持 2 个图表并排对齐中所描述的内容？这是我的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script> <style> #chart_a, #chart_b { width: 320px; height: 350px; } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } .chart_container { float: left; } </style> </head> <body> <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container"> <canvas id="chart_a"></canvas> </div> <div class="chart_container"> <canvas id="chart_b"></canvas> </div> </div> <script> var data, ctx; data = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; console.log(document.getElementById("chart_b")) ctx = document.getElementById("chart_b").getContext("2d"); var mychart2 = new Chart(ctx, { type: 'bar', data: data, options: { animation: false } }); /* // This code is valid only for v1 Chart.types.Bar.extend({ name: "BarAlt", draw: function () { this.scale.endPoint = this.options.endPoint; Chart.types.Bar.prototype.draw.apply(this, arguments); } }); */ data = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; ctx = document.getElementById("chart_a").getContext("2d"); var mychart1 = new Chart(ctx, { type: 'bar', // type: 'barAlt' data: data, options: { animation: false, // endPoint: mychart2.scale.endPoint, }, }); </script> </body> </html> 虽然我意识到使用 chart.helpers.extend 实现与 v2 中相同的功能是可能的，但我不确定 v3 中的替代方法，因为助手已被删除。在ES2015类中使用它似乎很好，如https://www.chartjs.org/docs/3.4.1/developers/charts.html所示，但我不知道如何导入BarController。意想不到的结果：预期结果：更新说明：虽然此解决方案是针对 Chart.js 版本 3.4.1 实现的。正如所要求的，它在当前版本 4.4.1 中无需更改即可工作。除了一些技术上的复杂性（比如现在的 Chart.js 的布局）相当复杂，不能通过设置来改变 y 轴的高度一个变量），存在标签旋转的问题：默认方式标签计算旋转允许大标签延伸到图表区域的左侧将其压缩到右侧（问题中描述为不需要）。我通过一个使用三角函数的插件解决了这个问题计算标签的新旋转，以便图表区域可以有其全部可能的宽度。该插件使用 afterLayout 钩子，因为这是计算轴大小的最早阶段。即使画布大小没有调整，设置maintainAspectRatio: false也是必须的动态地，因为它允许图表区域扩展到最大可用范围空间，无论画布大小如何。问题的主要部分，也在afterLayout钩子中实现很简单：resize 第一个图表，使得 bottom 的 chartArea 值与第二张图表的 bottom 的 chartArea。 const data1 = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const data2 = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const mychart2 = new Chart("chart_b", { type: 'bar', data: data2, options: { animation: false, maintainAspectRatio: false, layout:{ autoPadding: false, //padding: {left: 20, bottom: 30} // test with padding } }, plugins: [ { afterLayout(chart){ //label rotation if(!chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__rotationFixed = true; const xScale = chart.scales.x, yScale = chart.scales.y; const extraSpaceToLeft = yScale.left - yScale.paddingLeft; if(extraSpaceToLeft > 5){ const currentLeft = chart.chartArea.left, minTheoreticalLeft = yScale.width, currentRotation = xScale.labelRotation * Math.PI / 180, label0XG = xScale.getPixelForValue(xScale.ticks[0].value), label0Length = label0XG / Math.cos(currentRotation), cosMin = (label0XG - currentLeft + minTheoreticalLeft) / label0Length, minRotation = cosMin < 0 ? 90 : Math.acos(cosMin) * 180 / Math.PI; const gainToLeft = label0XG - label0Length * cosMin; if(cosMin > 0 && Math.abs(gainToLeft - extraSpaceToLeft) > 10){ console.warn(`Assumption failed; rotation possibly miscalculated! `+ `extraSpaceToLeft = ${extraSpaceToLeft} gainToLeft = ${gainToLeft}`) } xScale.options.ticks.minRotation = minRotation; xScale.options.ticks.maxRotation = minRotation; chart.options.scales.x.ticks.minRotation = minRotation; chart.options.scales.x.ticks.maxRotation = minRotation; chart._updateLayout(chart._minPadding); // hacky, but cleaner //chart.update('none'); // documented alternative to the above } } } } ] }); /*const mychart1 = */new Chart("chart_a", { type: 'bar', data: data1, options: { maintainAspectRatio: false, animation: false, }, plugins:[ { afterLayout(chart){ // resize the first chart if(!chart.__resized){ // run only once, avoid infinite recursion chart.__resized = true; const deltaY = mychart2.chartArea.bottom - chart.chartArea.bottom; chart.resize(chart.canvas.offsetWidth, chart.canvas.offsetHeight + deltaY); } } } ] }); #chart_a, #chart_b{ width: 320px; height: 350px; background-color: rgba(192, 192, 192, 0.7); /* to see what's happening */ } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } #aligned{ min-width: 650px } .chart_container { float: left; } <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container" id="container_a"> <canvas id="chart_a"></canvas> </div> <div class="chart_container" id="container_b"> <canvas id="chart_b"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>  此解决方案具有优势（与旧版本的链接方案相比） Chart.js）画布中没有空白空间，因此它们可以垂直移动在狭窄的介质中。此外，它可以立即调整以调整（放大）第二个图表的大小，以便很适合第一个。 const data1 = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const data2 = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const mychart1 = new Chart("chart_a", { type: 'bar', data: data1, options: { maintainAspectRatio: false, animation: false, } }); /*const mychart2 = */new Chart("chart_b", { type: 'bar', data: data2, options: { animation: false, maintainAspectRatio: false, layout:{ autoPadding: false, //padding: {left: 20, bottom: 30} // test with padding } }, plugins: [ { afterLayout(chart){ //label rotation if(!chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__rotationFixed = true; const xScale = chart.scales.x, yScale = chart.scales.y; const extraSpaceToLeft = yScale.left - yScale.paddingLeft; if(extraSpaceToLeft > 5){ const currentLeft = chart.chartArea.left, minTheoreticalLeft = yScale.width, currentRotation = xScale.labelRotation * Math.PI / 180, label0XG = xScale.getPixelForValue(xScale.ticks[0].value), label0Length = label0XG / Math.cos(currentRotation), cosMin = (label0XG - currentLeft + minTheoreticalLeft) / label0Length, minRotation = cosMin < 0 ? 90 : Math.acos(cosMin) * 180 / Math.PI; const gainToLeft = label0XG - label0Length * cosMin; if(cosMin > 0 && Math.abs(gainToLeft - extraSpaceToLeft) > 10){ console.warn(`Assumption failed; rotation possibly miscalculated! `+ `extraSpaceToLeft = ${extraSpaceToLeft} gainToLeft = ${gainToLeft}`) } xScale.options.ticks.minRotation = minRotation; xScale.options.ticks.maxRotation = minRotation; chart.options.scales.x.ticks.minRotation = minRotation; chart.options.scales.x.ticks.maxRotation = minRotation; chart._updateLayout(chart._minPadding); // hacky, but cleaner //chart.update('none'); // documented alternative to the above } } // resize the second chart if(!chart.__resized && chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__resized = true; const deltaY = mychart1.chartArea.bottom - chart.chartArea.bottom; chart.resize(chart.canvas.offsetWidth, chart.canvas.offsetHeight + deltaY); } } } ] }); #chart_a, #chart_b{ width: 320px; height: 350px; background-color: rgba(192, 192, 192, 0.7); /* to see what's happening */ } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } #aligned{ min-width: 650px } .chart_container { float: left; } <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container" id="container_a"> <canvas id="chart_a"></canvas> </div> <div class="chart_container" id="container_b"> <canvas id="chart_b"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>

chart.js

回答 1 投票 0

如何增加标签和图表区域之间的空间？

我所有的标签都在栏的顶部。我可以看到这个：但我希望是这样的：填充不适用于 xAxes，但适用于 yAxes。图例：{显示：假}，尺度：{ ...

javascript charts chart.js chart.js2

回答 1 投票 0

react-chartjs-2与chartJs 3：错误“arc”不是注册元素

我正在开发一个 React 应用程序，我想在其中显示图表。我尝试使用react-chartjs-2，但我找不到让它工作的方法。当我尝试使用 Pie 组件时，出现错误：Error: "arc...

reactjs chart.js react-chartjs-2

回答 11 投票 0

如何为chart.js（条形图）动态推送数据集？

我使用chartjs（条形图）来显示一些数据。我尝试将数据动态添加到数据集数组，但它不起作用。例如，假设我在数据集数组中有 2 个对象，并且我动态...

javascript chart.js

回答 4 投票 0

React Chartjs 未显示动态值

我正在使用 Chartjs 库在我的应用程序中显示图表。我在单独的组件中使用图表。当值被硬编码时，组件显示图表。我想传递值f...

javascript reactjs chart.js

回答 1 投票 0

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

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

javascript chart.js

回答 1 投票 0

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

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

javascript angular typescript chart.js angular-package-format

回答 1 投票 0

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

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

angular chart.js

回答 5 投票 0

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

我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码：图表线.component.html 我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码：图表线.component.html  <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">  <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-bubble'"> <app-chart-bubble></app-chart-bubble> </ng-container>  <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  <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! ...

angular chart.js html5-canvas ng2-charts

回答 1 投票 0

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

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

javascript chart.js

回答 1 投票 0

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

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

angular api chart.js ng2-charts

回答 2 投票 0

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

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