chart.js 相关问题

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

ChartJS 图表无法调整大小

我正在创建一个程序，其中的图表有两个 x 轴和一个 y 轴，但我想让图表更小。当我尝试“宽度：50px”和“高度：50px”时，它没有调整大小......

javascript html css charts chart.js

回答 1 投票 0

在 Cumulocity 中使用 Chart.js 和 Ng2-Chart

我目前正在构建一个托管在 Cumulocity IoT 平台上的 Angular 应用程序，并且我正在尝试使用 Chart.js 生成自定义条形图。一开始这不起作用，所以我做了一点......

angular npm chart.js ng2-charts cumulocity

回答 1 投票 0

如何删除角度 ng2 图表中的网格线和轴？

我正在使用 Angular 16 和 ng2-charts 来显示基本折线图。我想从图表中删除网格线。我找不到执行此操作的选项。有人可以帮助我吗？我正在使用 Angular 16 和 ng2-charts 来显示基本折线图。我想从图表中删除网格线。我找不到执行此操作的选项。有人可以帮助我吗？ <div class="chart-wrapper" style="padding-left: 30px;"> <canvas baseChart width="230" height="130" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [legend]="lineChartLegend" [type]="lineChartType"> </canvas> </div> lineChartData: any[] = [ { data: [71, 72, 73, 72, 74, 75 ,85, 72, 78, 75, 77, 75], borderWidth: 1, backgroundColor: 'gray', borderColor: 'black', pointBackgroundColor: 'black', pointBorderColor: 'black', pointHoverBackgroundColor: 'gray', pointHoverBorderColor: 'gray', tension:0 }, ]; lineChartLabels: any[] = ['a', 'b', 'c', 'd', 'e', 'f','g', 'h', 'i', 'j', 'k', 'l']; lineChartOptions: ChartOptions = { responsive: true, elements: { point: { radius: 0, }, line: { borderWidth: 1 } } }; lineChartLegend = false; lineChartPlugins = []; lineChartType: ChartType = 'line'; 要删除网格线，您可以调整 lineChartOptions 以指定 x 轴和 y 轴不应显示网格线。按如下方式更新您的 lineChartOptions： lineChartOptions: ChartOptions = { responsive: true, scales: { x: { // for x-axis grid: { display: false } }, y: { // for y-axis grid: { display: false } } }, elements: { point: { radius: 0, }, line: { borderWidth: 1 } } };

angular chart.js ng2-charts

回答 1 投票 0

Angular-7 - 如何创建混合网络和气泡图

我需要在 Angular-7 中设计一个混合网络和气泡图的图表。结果如下图所示，它还应该显示数据流，就像...

javascript angular chart.js angular7 ng2-charts

回答 1 投票 0

如何在chart.js中传递图表数据而不会出现类型错误

我正在创建一个带有图表的应用程序，目前我正在尝试将商店中的信息插入其中。但是，我收到错误。当我尝试通过时会发生此错误...

javascript vue.js chart.js nuxt.js

回答 1 投票 0

突出显示悬停饼图图表上的图例

如何在chartjs中将饼图悬停时突出显示相应的图例？尝试突出显示悬停图例上的饼图相应切片，现在需要反之亦然。我正在使用 ChartJS 4.3

javascript chart.js

回答 1 投票 0

无效道具：道具“chartData”的类型检查失败。预期的对象，得到 Null vue.js

这是我在运行此代码时遇到的错误。 [Vue warn]：无效的道具：道具“chartData”的类型检查失败。预期对象，为空这就是我调用 vue-chartjs 的方式

firebase vue.js chart.js vuejs3 vue-chartjs

回答 2 投票 0

chart.js 中多个数据集的多个标签

我在react中使用chart.js来创建折线图。我必须显示日、月、年的数据。对于那一天我有不同的标签和数据，对于当月我有不同的标签和数据，wh...

reactjs react-native chart.js chart.js2

回答 3 投票 0

Charts.js 极地面积图忽略最小和最大刻度（在 primeNG 角度包装器中）

我正在使用 Chart.js 的 primeng 角度包装器请参阅此处的代码： https://stackblitz.com/edit/stackblitz-starters-cpgcnn?file=src%2Fapp%2Fbulls-eye-chart%2Fbulls-eye-chart.component.ts 我想看

angular chart.js

回答 1 投票 0

ChartJs：如何仅禁用初始动画

我不喜欢chart JS折线图的初始动画，但是当我更新图表时，我确实想要一个动画。我能找到的唯一相关解决方案，例如：选项：{animation: false} 和选项：{

chart.js

回答 1 投票 0

如何创建一个图表，其中某些标签在 ChartJS 中没有值？

我想在 ChartJS 中创建一个图表，显示随时间变化的进度。在我的数据库中，我只有进度更改日期的值和日期。所以像这样： “亲...

charts chart.js

回答 1 投票 0

react-chartjs-2（为图例创建自定义标签）

我正在尝试更新react-chartjs-2中图例中的单词格式。例如： {{name}}_365 > {{name}} (LY)（例如，Clicks_365 > 点击次数 (LY)） {{name}}_Rel_YoY > {{name}}（% 陈...

chart.js react-chartjs-2

回答 1 投票 0

如何在React ChartJS中获取填充圆形图表？

我想介绍一个填充圆图（气泡图的变体，仅包含半径作为其尺寸）。 React Chartjs 甚至 Chartjs 仅支持气泡图而不支持 Packed Circle

reactjs chart.js bubble-chart react-chartjs-2

回答 1 投票 0

Chart.js 错误无法读取 null 的属性“长度”

我通过 ajax 调用使用 Chart.js $.ajax({ url: 'MenuG.aspx/GetGraphData', 类型：“帖子”，数据： ”{}”，数据类型：“json”，内容类型：“申请...

javascript chart.js

回答 1 投票 0

SvelteKit：chartjs-plugin-zoom 不起作用

示例代码：从 'svelte' 导入 { onMount } 从 'chart.js/auto' // 版本导入图表...</desc> <question vote="0"> <p>示例代码：</p> <pre><code><div> <canvas id="example"></canvas> </div> <script> import { onMount } from 'svelte' import Chart from 'chart.js/auto' // Version 4.3.3 onMount(async () => { const zoomPlugin = await import('chartjs-plugin-zoom') // Version 2.0.1 | Why import in onMount: https://stackoverflow.com/a/76728081/9157799 Chart.register(zoomPlugin) new Chart( document.getElementById('example'), { // From https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/usage.html type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { plugins: { zoom: { zoom: { wheel: { enabled: true, }, pinch: { enabled: true }, mode: 'xy', } } } } } ) }) </script> </code></pre> <p>无需 SvelteKit，它也可以工作（<a href="https://www.reddit.com/r/sveltejs/comments/13d9ebq/trying_to_get_chartjspluginzoom_to_work_on_svelte/?utm_source=share&utm_medium=web2x&context=3" rel="nofollow noreferrer">REPL</a>）。</p> </question> <answer tick="false" vote="0"> <h5>1. <a href="https://kit.svelte.dev/docs/page-options#ssr" rel="nofollow noreferrer">禁用页面的SSR</a>：</h5> <pre><code>// +page.js export const ssr = false; </code></pre> <h5>2.正常导入<pre><code>zoomPlugin</code></pre>。</h5> <pre><code><div> <canvas id="example"></canvas> </div> <script> import { onMount } from 'svelte' import Chart from 'chart.js/auto' // Version 4.3.3 import zoomPlugin from "chartjs-plugin-zoom" Chart.register(zoomPlugin) onMount(() => { new Chart( document.getElementById('example'), { // From https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/usage.html ... } ) }) </script> </code></pre> </answer> </body></html>

chart.js svelte sveltekit chartjs-plugin-zoom

回答 0 投票 0

更新数据和标签时，图表无法添加更多列

所以我固有的图表设置是 var Chart2config = { 类型：“酒吧”，插件：[图表数据标签]，数据： { //标签:['你好','再见','你好','再见','你好','再见','你好','

javascript chart.js

回答 1 投票 0

EJS 标签与 ChartJS？

是否可以使用EJS标签向图表添加数据？这是我当前图表的数据： var canvas = document.getElementById('myChart'); 变量数据 = { 标签：[“一”、“二月”、“三月”、“四月...

node.js mongodb express chart.js ejs

回答 3 投票 0

ChartJSNodeCanvas Fontconfig 错误：无法加载默认配置文件

我有一个问题我目前正在尝试使用 ChartJSNodeCanvas 运行 javascript 项目常量宽度= 400； //像素常量高度= 400； //像素 const canvasRenderService = new ChartJSNodeCanvas({