问题标签 [chart.js2]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
9 回答
166497 浏览

javascript - Chart.js v2 - 隐藏网格线

我正在使用 Chart.js v2 绘制一个简单的折线图。一切看起来都很好,除了有我不想要的网格线:

我不想要的网格线

折线图的文档在这里:https ://nnnick.github.io/Chart.js/docs-v2/#line-chart ,但我找不到任何关于隐藏这些“网格线”的信息。

如何删除网格线?

0 投票
6 回答
150193 浏览

javascript - 使用 chart.js v2 删除图表上的图例

我正在使用 Bootstrap、JQuery 和 Chart.js (v2) 创建主页。我的实现使用 v1 工作,但最近刚刚进入 Bower 并使用它下载了 v2。

我正在制作一个由 4 列组成的网格,每列都包含一个饼图,但是 v2 中的缩放对我来说有点令人困惑。我希望图表具有响应性,以便它们与平板电脑和智能手机等较小的设备正确缩放,我的问题之一是摆脱图表的图例以及将鼠标悬停在我的部分上时的悬停信息图表。

索引.html

函数.js

如果我删除空的“标签”字段,图表将不再起作用。从外观上看,图表顶部有一个小间距,这可能表明标题已写入,但它们只是空字符串。

有谁知道如何删除图例和悬停描述?我根本无法理解它是如何使用的

一有时间,我就会把手放在一个jsfiddle上!

编辑:链接到文档:https ://nnnick.github.io/Chart.js/docs-v2/#getting-started

0 投票
1 回答
4224 浏览

javascript - 部分视图中的多个 Chart.js 图表相互覆盖

使用 Asp.Net MVC,我正在尝试使用chart.js库创建一个在单个页面上显示多个条形图的网页。每个图表都有不同的数据,并在其自己的局部视图中创建。但是,不是创建多个不同的图表,而是最后一个图表数据覆盖页面上的第一个图表,并且所有剩余的图表都显示为空白。如下图所示,“Title and Segments”数据和图例覆盖了“Producers”数据,“Title and Segments”图表为空。

在此处输入图像描述

在主视图页面上,我使用 foreach 循环为每个报表呈现相同的局部视图。

在我的局部视图中,我根据模型中的值为画布对象创建了一个动态 ID 名称。这是为了克服Chart.js - Multiple Line Charts - Only Show Last Chart中提到的问题的尝试。

然后我使用动态 ID 创建一个画布对象。

在我的局部视图中的 chart.js 脚本中,我使用 eval() 创建动态 ctx 和 myBar 变量。(想法来源:如何在javascript中声明和使用动态变量?


我见过其他类似的问题,但似乎没有一个可以解决我的问题:
同一页面中的多个 chartjs 在
部分视图中呈现 HTML5 图表仅显示空白数据

0 投票
2 回答
4078 浏览

angular - Chart.js v2 图表不显示在角度 2 内(但 Chart.js v1 完美运行)

我在 angular2 属性指令中渲染图表(angular2 团队采用的一种方法)。此方法适用于 chart.js,但不适用于 chart.js 2.x

属性指令的代码是...

造型是...

使用它的组件有...

在模板中。

一切都如预期。console.log 语句显示 ctx 和 this.myChart 都在 ngAfterViewInit 生命周期钩子中定义。没有错误。该图根本不显示。

PS Chart.js v2 代码在 Angular2 之外可以正常工作,根据这个 JS Fiddle - http://jsfiddle.net/beehe4eg/

JSFiddle 和我的代码之间的唯一区别是挂钩到 DOM ...

属性指令的文档,特别是 DOM 钩子的文档是 ... https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft

element.nativeElement 钩子适用于带有 angular2 的 chart.js v1(使用相同的方法)。

请注意,github repo ... https://github.com/valor-software/ng2-charts 正在使用 chart.js v1,所以这无济于事

希望那里的人可能知道解决方案或可以解决它!提前致谢。

0 投票
4 回答
25833 浏览

javascript - How to add OnClick Event on labels in Chart.js v2.0?

Looking For a method to add onClick handle on the "label" element in chartjs 2.0 As using below method will return "undifined" in console.log whenever clicking on any one of the label attributes in Char.js V2.0 RadarChart.

0 投票
1 回答
1322 浏览

javascript - 如何通过单击 Chart.js v2 画布外部的自定义按钮来导航工具提示弹出窗口?

Chart.js v2 库下关于移动可用性的讨论,

我们可以在 RadarChart 中的那些“得分点”上模拟点击事件吗?我问这个是因为,桌面视图和平板电脑视图通过单击图表中的这些点来通过返回的索引触发外部交互性对于“得分”导航来说看起来相当不错。

可以找到一个流行的例子是

});

但是,如果您查看移动视图,在 responsive:true 下,通过自动调整大小,图表会变得更小,因此radarchart 内的点对于移动点击可能非常小,
与标签相同,所有内容都会变得更小且更难点击。

是否可以自定义让用户导航那些“得分点”(最初通过手动点击画布触发)

是否可以通过雷达图左右两侧的外部“上一个”、“下一个”导航按钮(例如那些滑块/轮播导航按钮)间接触发?

0 投票
1 回答
1895 浏览

chart.js2 - Chart.js 将两个系列放在相同的比例上

所以我有一个包含两个系列的 chart.js 图表。一个是条形图,另一个是折线图。

S1 = 71,166,2,6,8

S2 = 6,2,4,8,5

当我绘制它们时,它们都出现在自己的尺度上,这使得条形图和折线图有点毫无意义。

我需要一种方法以相同的比例绘制两个图表。

有没有办法在 chart.js 中做到这一点?如果没有,你会怎么做?

谢谢。

0 投票
9 回答
238075 浏览

chart.js - Chart.js v2 隐藏数据集标签

我有以下代码使用 Chart.js v2.1.3 创建图表:

代码看起来很简单,但我无法从图中删除标签。我尝试了很多我在网上找到的解决方案,但大多数都使用 Chart.js v1.x。

如何删除数据集标签?

0 投票
1 回答
334 浏览

javascript - chart.js V2.0添加gif图片

我想将 gif 图像添加到 chart.js 中,就像这里的链接一样!/ 但在 chart.js 的最新版本(2.0)中。

这是完美适用于 .png 图像但不适用于 .gif 图像的代码,它也不适用于 chart.js 的 V2.0。请帮忙

提前致谢 :)

0 投票
5 回答
82837 浏览

javascript - Chart.js 2.0 甜甜圈工具提示百分比

我使用过chart.js 1.0,并且我的圆环图工具提示显示基于数据除以数据集的百分比,但我无法使用chart 2.0 复制它。

我搜索了高低并没有找到可行的解决方案。我知道它会受到选择,但我尝试过的一切都使馅饼功能失调。