chart.js相关内容

Chartjs - pointColor 跟随渐变描边的当前颜色

我刚刚使用 chartjs 库创建了折线图,并且我设法以渐变颜色绘制笔触.这是我到目前为止所做的简单 fiddle 示例. 接下来我需要的是让 pointColor 跟随渐变 stroke 并拾取它所在位置的当前颜色.喜欢这张 照片. 任何想法如何实现这一目标? 谢谢! 解决方案 更新 来自 是否可以在 chart.js 折线图中添加阴影? 不需要原始解决方案 ..
发布时间:2022-01-22 16:06:07 前端开发

Chart.js - 如何在图表中间添加文本?

我正在使用 Chart.js 创建这个折线图: 但我需要标记区域,如下所示: 有什么想法吗? 解决方案 你扩展你使用的图表,然后使用辅助方法编写标签 HTML 在下面的JS中,注意calculateY的参数是y value,而calculateX是标签索引 ..
发布时间:2022-01-22 16:05:58 其他开发

如何在chartjs中悬停时呈现垂直线

当我将鼠标悬停在 chartjs v2 的绘图区域上时,我试图渲染一条垂直线.我有一个基本的工作版本,但我还没有弄清楚每次画线时如何删除线(旧线只是保留). 这是一个工作示例 - https://jsfiddle.net/s9gyynxp/5/ var ctx = document.getElementById("myChart");var myChart = new Chart(ctx, ..
发布时间:2022-01-22 16:05:51 前端开发

隐藏分组堆积条形图中的空条 - chart.js

我使用的是chart.js 2.5.0 版,需要知道是否有任何方法可以隐藏分组堆叠条形图中每个组的空条?图表数据集中的某些数据值可以为空. 这就是我想要的:组合图表类型(分组和堆叠) var options = {响应式:真实,保持纵横比:假,工具提示:{模式:'标签',回调:{标签:功能(工具提示项,数据){var dataset = data.datasets[tooltipItem ..
发布时间:2022-01-22 16:05:30 前端开发

如何在 Chart.js 中为条形图和折线图添加第二个 Y 轴?

我正在尝试在 Chart.js 中添加双 Y 轴以进行两个数据集比较.我目前正在使用 Leigh Quince 的 LineBar 扩展,这是在这里找到的答案:Chart.js 如何获得组合条形图和折线图? 大约一年前还有一个针对双 Y 轴但仅针对折线图的解决方案,并且它与尼克的主人不同步.似乎有折线图和条形图,或者双 Y,但不是两者兼而有之. 我的问题是我需要将 TSAT %(饱和度 ..
发布时间:2022-01-22 16:05:11 前端开发

Ng2-Charts Linechart 仅显示前 2 个两个值

我正在启动使用 Angular-CLI(beta 22.1)初始化的新 Angular 应用程序.但是,当我在图表中添加测试数据(5 个值)时,它似乎缩放错误,只显示前两个值并将它们拉伸到整个图表长度(见图). 该项目是空白的,并且不包含任何 CSS. 我的app.component.html: app.component.ts 从'@angular/core'导入{组件}; ..
发布时间:2022-01-22 16:05:05 前端开发

设置动画速度 - ChartJS?

我正在尝试在chartJS中设置饼图的动画速度. 我尝试了以下方法: numSteps: 数字 动画步骤:数字 Chart.defaults.global.animationSteps = Number 这些都没有改变速度.有什么建议吗? var myNewChart;变量数据 = [{值:30,标签:“你好",颜色:“#F7464A"}, {价值:50,颜色:“ ..
发布时间:2022-01-22 16:04:54 前端开发

chart.js 中的水平条形图

我正在尝试使用 chart.js 2.3.0 绘制水平条形图 - var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");var MeSeData = {标签: [“我",“SE"],数据集:[{标签:“测试",数据:[100, 75],背景颜色:[“#669911",“#119966"],h ..
发布时间:2022-01-22 16:04:47 其他开发

使用chartJS显示带有连接点的折线图

我想使用 ChartJS 绘制这样的图表.但是我找不到连接第一个和最后一个点并在该连接区域内显示单个唯一点的解决方案.而且我还需要为每个点设置不同颜色的样式.我尝试探索 ChartJS 文档,但找不到解决方案.是否有任何具有这些功能的图表绘图库或如何使用 ChartJS 做到这一点? 解决方案 你可以创建一个散点图 而不是 线一个>. 这是一个示例: (试图复制您给定的图像amap ..
发布时间:2022-01-22 16:04:13 前端开发

如何使用 Webpack 导入 Chart.js

我有一个使用 Webpack 的 Vue JS 项目,需要导入 Chart.js.我试过了 //从 'chart.js/Chart.min.js' 导入图表 这会在尝试使用该库时产生 js 错误. 解决方案 npm install chart.js之后, 你可以简单地使用 从'chart.js'导入图表 导入chart.js希望对您有所帮助. ..
发布时间:2022-01-22 16:04:04 前端开发

如何添加指向 chart.js(甜甜圈图)的链接?

我想添加指向圆环图的链接,以便能够向用户发送一个页面,其中包含通过单击选项过滤的记录. 例如这里,如果用户点击“绿色",我想将用户发送到一个显示所有“绿色"记录的页面. 我没有找到一种简单的方法来做到这一点,并尝试了类似的方法,但目前还不行: (我添加了一个属性“filter"和我需要过滤它的“id") var 数据 = [{价值:300,颜色:“#F7464A",突出显示:“ ..
发布时间:2022-01-22 16:03:35 前端开发

ChartJs 自定义工具提示位置

那里.我使用 ChartJS 并自定义工具提示,但是第一个和最后一个工具提示的位置存在问题.看: 我想为了解决这个问题,我需要使用 https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes但是,我无法理解公式应该是什么. CodePen 示例 - https://codepen.io/an ..
发布时间:2022-01-22 16:03:08 前端开发

ChartJS - 带有多个环的圆环图

是否可以使用 ChartJS 创建一个具有多个环的圆环图,如下所示? 解决方案 您可以在 fiddle 链接找到解决方案 var ctx = document.getElementById("chart-area").getContext("2d");var myDoughnut = new Chart(ctx, config);变量配置 = {类型:'甜甜圈',数据: {数据集:[{数 ..
发布时间:2022-01-22 16:03:00 前端开发