chart.js 相关问题

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

我使用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%。我尝试过