charts相关内容

ChartJS 条形图,带有对应于每个条形图的图例

我正在尝试了解其条形图上的 ChartJS 文档.它对我来说没有意义,因为顶部的标签在某种意义上看起来好像它只适用于第一个条形(基于颜色),而在另一种意义上,整个图表(它是唯一的标签不在工具提示中,它在前面和中间) 我一直在努力让它更像他们的折线图,它显示了一个带有标签的图例和一个与图表上的每条线相关的彩色方块.(他们没有多线图的例子,但它确实像这样工作). 数据对象中的标签属性被转换 ..
发布时间:2022-01-22 16:09:43 前端开发

使标签在图表 js 中响应

我很难使 y 轴上的标签具有响应性.我希望标签移动到多行并在空间不足时具有响应式字体大小.我正在使用 chart.js 数据标签用于在水平条形图顶部标记的库.由于外部图表容器,标签也被隐藏了. var chart = new Chart('ctx', {类型:'水平条',数据: {标签:[“某事某事某事",“等等等等……",“等等等等……",“某事某事某事"],数据集:[{数据:[6, 87, ..
发布时间:2022-01-22 16:09:28 前端开发

Chart.js v2.6:为饼图输出值添加箭头

我正在使用 Chart.js v2.6 输出饼图.数据来自 MySQL 数据库.图表正确呈现,但我需要为数据值添加箭头,如下面的屏幕截图所示. 带箭头的饼图示例: 下面是我使用 Chart.js 输出饼图的代码: var chartdata_order_status = {标签:状态,数据集:[{label: '订单状态',背景颜色:["#00b0f0","#92d050","#ff ..
发布时间:2022-01-22 16:09:21 PHP

Chart.js 为比例添加填充

我需要在 x 和 y 轴上添加填充.这个问题(How to add padding betweenchart.js 中的图形和 X/Y 比例?)是我的确切情况,只有我使用的是 Chart.js 2. 见截图:http://i.imgur.com/2BvlZDg.pngp> 基本上我的观点是大图,所以它们超出了图表范围.有没有办法为图表区域或比例添加填充以使其更适合? 解决方案 想出 ..
发布时间:2022-01-22 16:07:24 前端开发

Chart.js 堆积条形图 - 按值对条形中的值进行排序

我尝试使用 Chart.js 框架(2.7 版)实现堆叠条形图,但遇到以下问题:在每个条形图中以与 JSON 结构中提供的顺序相同的顺序绘制单个数据元素(这绝对合乎逻辑且易于理解).我想让它们排序:最大的元素在底部,最小的在顶部. 我想它可以使用一些插件定制黑魔法来完成,但无法弄清楚. 任何帮助将不胜感激. 例子: var chart = new Chart(documen ..
发布时间:2022-01-22 16:06:38 其他开发

Chart.js 2.X 中的条形值 - dataset.metadata 未定义

我是 Chart.js 2 的新手,因此我们将不胜感激. 我正在尝试显示图表中每个条形的值.正如 使用图表在帕累托图中显示值中的建议.js 2.0.2 和其他用户我正在使用这个解决方案.但是,这部分会抛出异常 TypeError: dataset.metaData is undefined: dataset.metaData.forEach(function(p) {ctx.fillTex ..
发布时间:2022-01-22 16:06:22 前端开发

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

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

隐藏分组堆积条形图中的空条 - 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 前端开发

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

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

ChartJs 自定义工具提示位置

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

将 Chart JS 2 上的条形图扩展为一种新型 Chart

我实际上是在使用 Chart JS 2.0.1 在页面上绘制图表. 我的客户要求我在条形图中添加一条线,以便他们可以看到无法超过的限制.像这样:y轴上的条形图 因此,我正在尝试将条形图扩展为一个新的条形图,该条形图采用一个名为 lineAtValue 的参数,该参数提供该线的 y 值. 我成功扩展了条形图,但它覆盖了页面中显示的其他条形图,而我在其他条形图中不需要它. 这是 ..
发布时间:2022-01-22 16:02:19 前端开发

插入百分比charts.js 甜甜圈

我正在使用charts.js 库,想知道如何在圆环图的孔中添加一些标记(例如百分比)- 我的 js jQuery(document).ready(function(){变量数据 = [{值:5,颜色:“#A1638C",突出显示:“#BF7AAF",标签:“Días Completados 1/21"},{值:95,颜色:“#07659A",突出显示:“#4190BA",标签:“Días ..
发布时间:2022-01-22 16:01:47 前端开发

如何使用 ChartJS 在水平条形图上绘制垂直线?

有许多扩展图表以包含水平和垂直线的示例.但是,我还没有找到用水平条形图绘制垂直线的方法. 水平折线图上的水平线 垂直线开启水平折线图 垂直条形图上的水平线 没有像“水平条形图"选项那样的“垂直折线图"选项.如何将水平条形图与垂直线结合起来? Chart.js 文档 结果将有一个条形数据集和一个线形数据集,可以在使用相同轴的同一图表上使用,如下所示: 解决方案 C ..
发布时间:2022-01-22 16:00:44 前端开发

以编程方式打开和关闭 Chart.js 工具提示

Chart.js 2.2.1 知道如何触发当我将鼠标悬停在数据点上时运行的代码以及当我移开鼠标时运行的代码吗?我需要以编程方式显示和隐藏图表的工具提示. openTip(oChart, datasetIndex, pointIndex){//如何打开特定的工具提示?}closeTip(oChart, datasetIndex, pointIndex){//如何关闭相同的工具提示?} 如果 ..
发布时间:2022-01-22 16:00:32 前端开发