chart.js2相关内容

如何使用 Chart.js 在圆环图的中心添加文本?

我想创建一个具有两个值的甜甜圈图.单击图形应在中心打印值.我在 stackoverflow 中找到了解决方案类似于我的要求.我想使用来自 github 的最新 Chart.js 库.此功能在最新的 Chart.js 中可用吗? 解决方案 在 Chart.js v2.x 中当然可以做这样的事情 我认为最好的方法是使用插件.事实上,Cmyker awnser你链接的问题甚至更新了他的帖子 ..
发布时间:2021-12-25 17:06:29 前端开发

在chart.js 数据和标签字段中使用数组值

我希望将数组的值传递给 chart.js 数据集的数据和标签字段. 这里是获取 json 数据的 ajax 调用成功的代码.我获取 json 数据并将其存储到一个数组中. Data = jQuery.parseJSON(result);var count = Data.length;无功计数器 = 0;而(计数> 0){标签结果[计数器] =[数据[计数器].时间];计数器++;数数 - ..
发布时间:2021-11-18 04:14:05 前端开发

Chart.js v2-隐藏网格线

我正在使用Chart.js v2绘制简单的折线图.一切看起来都很好,除了我不想要的网格线: 如何删除网格线? 解决方案 我找到了一种可在折线图中隐藏网格线的解决方案. 将 gridLines 颜色设置为与div的背景颜色相同. var选项= {比例尺:{x轴:[{网格线: {颜色:"rgba(0,0,0,0)",}}],y轴:[{网格线: {颜色:"rgba(0,0,0,0 ..
发布时间:2021-05-19 19:15:35 前端开发

Chart.js集成到Django项目

Charts.js和Django的新功能.似乎我可以使它正常工作,但是却不如我所希望的那样好.想要整合在Django端进行的两个计算: 我的views.py: def图(要求):bug_all = BugTable.objects.filter()bug_all_total = bug_all.count()bug_posted = BugTable.objects.filter(状态= ..
发布时间:2021-05-01 20:30:13 Python

使用chart.js在图表中的图例中隐藏第一个标签

我创建了一个堆积的条形图,我必须隐藏第一个数据集的标签和图例中的框"Total Line",总之还是要隐藏第一个数据集或任何数据集的标签.我已经阅读了文档,选项中有一个过滤器,但是没有用. 隐藏此标签 这是图表的html和js var ctx = document.getElementById("girth-measure-chart");var totalLine = [115,11 ..
发布时间:2021-04-21 20:40:36 前端开发

Chart.JS的条形图的mousein和mouseout事件?

我已经搜索了条形图和事件文档(我觉得有点困惑),我一直将鼠标悬停在条形图的条形图上(而不是图例!)时,无法弄清楚如何处理mousein和mouseout事件.目前,我能找到的最接近的是利用工具提示上的回调,如下所示: options.tooltips = {backgroundColor:'rgba(0,0,0,0)',fontColor:'rgba(0,0,0,0)',回调:{标签:函数(t ..
发布时间:2021-04-21 20:30:18 前端开发

Line Chart.js中具有反转图像的点样式属性

引用小提琴 URL : var options = {类型:“行",数据: {标签:[“红色",“蓝色",“黄色",“绿色",“紫色",“橙色"],数据集:[{标签:“投票数",数据:[12,-19、3、5、2、3],borderWidth:1pointStyle:'triangle',pointRadius:'10',pointBackgroundColor:'红色'},],pointS ..
发布时间:2021-04-21 20:30:12 其他开发

固定chart.js中条形图的Y轴高度?

要求:我正在使用chart.js.在条形图中,我要固定Y轴的高度.有任何属性或技巧可以做到这一点吗? 解决方案 如果要控制图表的高度,可以更改画布的高度 或者如果您想更改y轴值的高度,请尝试以下操作.下面将确保条形的最大大小为25000,每一步为5000,回调将分别标记为5k,10k ..
发布时间:2021-04-21 20:29:55 其他开发

如何在Chart.js折线图上自定义y轴标签?

我有以下图表,想手动设置Y轴标签.而不是使用1,2,3,4,5,我想要一个,两个,三个,四个,五个. 有没有办法做到这一点?这是我的选项结构: 选项= {比例尺:{y轴:[{scaleLabel:{labelString:[“一个",“两个",“三个",“四个",“五个"]}},刻度:{最小:1,最大:5,步长:1,建议最小:0.5,建议最大:5.5},gridLines:{display:f ..
发布时间:2021-04-21 20:28:24 其他开发

ChartJS插件数据标签未在Ionic 3上显示标签

我正在使用Ionic 3,正在显示条形图,并且需要在条形图旁边显示数据标签,例如此问题我遵循了到目前为止找到的关于chartjs-plugin-datalabels的说明,但是没有用,它没有在我的图表上显示任何数据标签. 我通过npm安装了chartjs和chartjs-plugin-datalabels,它们在我的package.json中看起来像这样 "chart.js": "^2 ..
发布时间:2020-11-30 18:49:55 其他开发

Chart.js v2:甜甜圈内部的甜甜圈之间的空间

我正在使用chart.js v2.5.0. 我将甜甜圈放入甜甜圈中. 我希望两个甜甜圈( A )之间的距离更大,而又不影响同一个甜甜圈( B )中的切片之间的距离. 请参见下图: 当前,我正在使用属性 borderWidth . 但是,这也会影响 B 的宽度. 请参见以下代码: options: { elements: { ..
发布时间:2020-11-24 02:32:29 前端开发

Chart.js删除堆栈

我有一个堆积的条形图和两个折线图。第二个折线图是堆积在第一个折线图的顶部,但我不希望这种行为。 我尝试过的是显式设置堆栈模式 ... 类型:'line', 标签:“ lineChart1”, 数据:lineData1, borderWidth:1, 填充:false, 选项:{ 图例:{ 显示:false }, 比例尺:{ xAxes:[{ stacked:false, } ..
发布时间:2020-10-01 02:50:09 前端开发

更改Chart.js工具提示插入符位置

我使用 Chart.js 2.5创建了一个甜甜圈图。我遇到的问题与工具提示有关。当我将鼠标悬停在图表上时,将显示工具提示,并且插入符号始终停留在左侧或右侧,如下所示: 我想更改插入标记的位置,使其始终显示在底部。 这是我的图表代码 var myChart =新图表(ctx,{ 类型:'doughnut', 数据:{ 标签:['Jan','Feb','Mar'], 数据集: [{ ..
发布时间:2020-10-01 02:48:47 前端开发

chart.js插件,用于制作瀑布图

我想创建一个chart.js插件来创建瀑布图。 我刚开始使用chart.js。我正在考虑扩展条形图以创建瀑布图。 条形图控制器中的绘制函数如下: draw:function(ease){ var me = this; var easingDecimal =缓解|| 1; helpers.each(me.getMeta()。data,function(rectangle ..
发布时间:2020-10-01 02:32:06 其他开发

如何在Chart.js v2中设置刻度数字的格式

首先,对于我的问题与其他问题稍有相同,我深表歉意。我搜索了一个解决方案,发现了3个类似的问题,但是对于我来说,这些问题都不起作用,因为我发现的示例使用Chart.js v1。 我看到了一个示例使用放置在 scaleLabel 中的函数来格式化数字,如下所示: var options = { animation:false, scaleLabel:function(label){ ..
发布时间:2020-10-01 02:18:47 前端开发

ChartJs-设置刻度线之间的空间的背景色

我需要设置刻度背景颜色之间的偶数/奇数空间,如下图所示; 请参见“隔行颜色”背景色。我需要对垂直图和水平图都执行此操作。 请参见例如:”> https://canvasjs.com/docs/charts/chart-options/axisY/interlacedcolor/ 关于如何在图表js中实现类似功能的任何想法? 我还在这里找到了一个几乎不错的解决方案: http ..
发布时间:2020-10-01 02:11:16 其他开发

图表JS缩放盘

我正在使用Chart JS Zoom / Pan插件( https://github.com/ chartjs / chartjs-plugin-zoom ),想知道是否有一种方法可以在没有数据的情况下将其禁用。当前的基本选项设置为 pan:{已启用 :true, 模式:“ x” }, 缩放:{已启用 :true, 模式:'x' } 解决方案 是的,您可以通过将“ ena ..
发布时间:2020-10-01 02:04:02 其他开发