chart.js 相关问题

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

chart.js 中的自定义 Tailwind CSS 颜色

我有一个 React 应用程序，它利用 Chart.js 来渲染图表。我想使用 Tailwind CSS 配置中定义的自定义颜色来自定义图表中标签的颜色。我都有...

javascript reactjs chart.js tailwind-css

回答 2 投票 0

Chart.js 悬停线在鼠标离开时不会消失

我有一个使用react-chartjs-2库创建的图表。我创建了一个自定义插件来绘制垂直和水平悬停线。将鼠标悬停在...上时，悬停线会正确显示。

javascript reactjs charts chart.js

回答 1 投票 0

饼图未填充在 ASP.NET MVC 页面中

我在使用 Chart.js 填充饼图时遇到问题。图表图例出现，但值未定义。 html @页 @model FinalProject.Pages.Exam.ReportModel @{ 布局=空； } ...

javascript c# asp.net asp.net-mvc chart.js

回答 1 投票 0

饼图未填充 Asp.Net MVC 页面

我在使用chart.js 填充饼图时遇到问题。图表图例出现，但值未定义。希姆尔 @页 @model FinalProject.Pages.Exam.ReportModel @{ 布局=空； } &...

javascript c# asp.net asp.net-mvc chart.js

回答 1 投票 0

图表js高度限制

我正在努力在 SalesForce 中使用 ChartJS 显示甘特图。我有超过 2000 条时间线记录（条）要显示。虽然我能够向他们展示，但尝试增加 c 的高度......

javascript chart.js

回答 1 投票 0

图表js标签字体颜色不变

我的网络应用程序中有一个饼图，图表上方有一些标签，旁边有名称。由于颜色，文本很难阅读。（https://i.stack.imgur.com/C2SX6.png）我真的...

javascript charts colors chart.js settings

回答 1 投票 0

为 Chart.js 格式化 CSV 数据：如何从 CSV 文件创建 JavaScript 数据结构

我有一个名为 data.csv 的 CSV 文件，其中包含以下内容：数据.csv：时间、电压 0.0,20 0.2,1 0.3,15 0.4,2 0.5,31 0.6,11 我想从这个 CSV 数据创建一个 JavaScript 数据结构并存储...

javascript csv chart.js

回答 1 投票 0

Chart.js 3.6.2，Angular 10：对数折线图 Y 轴问题。即使数据发生变化，如何设置并保留 Y 轴属性？

我正在使用 Chart.js 3.6.2 在 Angular 10 中创建图表。我正在努力解决的一些问题： Y 轴标签和线条不是静态的；不同的数据导致 Y 轴标签的数量不同，

chart.js

回答 2 投票 0

带有使用自定义属性的对象的 Bar Chart.js - 要显示的问题

我有一组数据，分为10个区域。每个区域分为三个类别：A、B 和 C，每个类别都有一组数据。我的目标是用html和chart.js实现一个bar ch...

object chart.js visualization

回答 1 投票 0

使用库chart.js 在一张带有两个 y 轴的图表中绘制两个数据集

我使用chart.js库编写了以下代码，它生成下面显示的输出。我正在寻求有关如何有效控制水平轴上的标签的指导。代码我使用 Chart.js 库编写了以下 CODE，它生成了下面显示的 OUTPUT。我正在寻求有关如何有效控制水平轴上的标签的指导。代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <canvas id="chart" width="1920" height="1080"></canvas> <script> const ctx = document.getElementById('chart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { datasets: [ { yAxisID: 'yA', label: 'Data1', data: [ { x: 0.05, y: 12 }, { x: 0.15, y: 19 }, { x: 0.25, y: 3 }, { x: 0.35, y: 5 }, { x: 0.45, y: 2 }, { x: 0.55, y: 3 }, ], }, { yAxisID: 'yB', label: 'Data2', data: [ { x: 0.1, y: 20 }, { x: 0.2, y: 1 }, { x: 0.3, y: 15 }, { x: 0.4, y: 2 }, { x: 0.5, y: 31 }, { x: 0.6, y: 11 }, ], } ] }, options: { responsive: true, scales: { yA: { type: 'linear', position: 'left', ticks: { beginAtZero: true, color: 'blue' }, grid: { display: false } }, yB: { type: 'linear', position: 'left', ticks: { beginAtZero: true, color: 'green' }, grid: { display: false } }, x: { ticks: { beginAtZero: true }} } } }); </script> </body> </html> 输出我尝试使用提供的代码在单个 Chart.js 图表中绘制两个数据集。我希望这两个数据集都能在图表上清晰可见。根据代码片段和所描述的问题，您似乎在使用 Chart.js 图表中的水平（x 轴）标签时遇到了问题。要管理水平轴上的标签，您需要在图表配置中配置比例选项，特别是 x 轴部分。从您的代码中，我注意到您使用的数据点的 x 值为小数。如果您希望这些在 x 轴上显示为标签，则需要在图表配置的数据对象中指定标签数组。但是，当您不使用时间序列时，Chart.js 期望标签数组与 x 轴标签的数据集处于同一级别。以下是如何指定标签的高级示例： data: { labels: [/* array of labels corresponding to your data points */], datasets: [/* your datasets here */] }

javascript html graph chart.js

回答 1 投票 0

更改悬停在 Chart.js 上的勾号颜色

我有一个使用 Chart.js 制作的雷达图，我想在将鼠标悬停在其上方时更改刻度标签的颜色。这几天我几乎什么都试过了。我尝试使用

javascript chart.js

回答 1 投票 0

这种类型的图表有名称吗？可以使用图表引擎创建吗？

几十年前，我在一本 20 世纪 80 年代写的汽车行业书籍中看到了这种图表，从那以后或多或少就对它们着迷，想知道如何创建类似的时间轴...

graph highcharts chart.js google-visualization apexcharts

回答 1 投票 0

vue-chartjs 的多个实例

我正在尝试将多个甜甜圈类型图实现到单个组件中。库：https://vue-chartjs.org/guide/#creating-your-first-chart 我正在尝试将多个 Donut 类型图实现到单个组件中。库：https://vue-chartjs.org/guide/#creating-your-first-chart <div class="row"> <div class="col-12 col-lg-6"> <strong>Všetky</strong> <Doughnut chart-id="workNonWorkData" :dataset-id-key="'key1'" :chart-data="workNonWorkData" /> </div> <div class="col-12 col-lg-6"> <strong>Schválené</strong> <Doughnut chart-id="workNonWorkAprData" :dataset-id-key="'key2'" :chart-data="workNonWorkAprData" /> </div> </div> 当另一个被注释掉时，两个甜甜圈都可以独立工作。但当我想同时拥有两者时，只显示后一个。我检查了画布 ID，它们是不同的。所以我认为 vue 将这两个视为同一个实例？我使用的是 4.0.4 版本，将其降级为 4.0.3 版本并且可以使用。希望有帮助。 <script> import { Doughnut } from "vue-chartjs"; import Chart from "chart.js"; var plugin = function(chart) { var width = chart.chart.width; var height = chart.chart.height; var ctx = chart.chart.ctx; ctx.restore(); var fontSize = (height / 114).toFixed(2); ctx.font = fontSize ctx.textBaseline = "middle"; var text = 80; var textX = Math.round((width - ctx.measureText(text).width) / 2); var textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); } export default { extends: Doughnut, return { options: {} } mounted(){ this.addPlugin({ id: 'my-plugin', beforeDraw: plugin }); }

javascript vue.js chart.js vue-chartjs

回答 2 投票 0

无法向圆环图上的 ChartJSImage 添加可见标签

我想制作一个圆环图，其中每个弧都有特定格式的字符串。 ChartJSImage 中的选项有限，我想知道它是否可能。为了更清楚地说明，第一个

javascript chart.js

回答 1 投票 0

如何让chartjs Tooltip可滚动？

我尝试创建自定义工具提示。下面的代码提供了带有滚动条的工具提示，但无法滚动工具提示。不知道我错过了什么。有一个回调函数提供了一个li...

javascript reactjs chart.js react-chartjs-2

回答 1 投票 0

使用chartjs，如何定义canvas的相对宽度和高度？

使用 Chart.js 版本 4.2.0，我尝试在 Windows 11 上的最大化窗口上显示图表，其中图表高度为屏幕高度的 100%，图表宽度为屏幕宽度的 80%。我尝试过