问题标签 [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 投票
0 回答
665 浏览

javascript - 如何在 Chart.js 中的外部条和左侧/右侧之间的条形图中添加填充?

在 Chart.js 中创建条形图时,所有条形都会占据整个水平空间。如何在最左边和最右边的栏中添加一些填充以实现您在下图中看到的效果:

在此处输入图像描述

或者,如果条在中心对齐并在条本身上使用百分比的最大宽度,则可以实现这一点,这样它们就永远不会填满整个空间。但我也找不到任何选择。

目前我0在每边添加两个带有空白标签的值,这是可行的,但这只是一种解决方法:

我正在使用 Chart.js 2.3。

0 投票
8 回答
22665 浏览

javascript - 如何在 Chart.js 中删除轴的线/规则?

我设法使用以下方法删除了图表中的所有水平线/规则:

但我也想摆脱代表 Y 轴的规则/条。但我想保留标签

在此处输入图像描述

不幸的是,我找不到任何选择。我只能删除包括标签在内的整个轴。

我正在使用 Chart.js 2.3。

0 投票
1 回答
631 浏览

angularjs - 在 chart.js 折线图中显示线条的特定颜色

我有一个使用chart.js 2.4版和angular-chart.js的多折线图。我想分别以红色和绿色显示两条线,我不想在线条下方填充颜色。我该如何实现?

0 投票
1 回答
2112 浏览

chart.js - 是否可以使用 ChartJS 2 将两个 Y 轴组合成一个工具提示?

假设我有两个 Y 轴,分别标记为“foo”和“bar”。这些轴对应于沿相同间隔的点,例如过去 12 周中每周的 foos 和 bar 聚合。理想情况下,您将鼠标悬停在折线图上的这些点之一上,工具提示将显示 foo 和 bar 的相关数据;如果您没有多个 Y 轴,这就是它的工作原理。在实践中,您将鼠标悬停在单个点上以仅查看该特定点的数据。

为清楚起见,这是我的图表选项的样子:

图表数据分别指定ayAxisID和。y-axis-0y-axis-1

对于那些还没有看过带有两个 Y 轴的图表的人,我准备了一个简单的例子

所以我的问题是这是否可以用 Chart.js 2 完成?

0 投票
0 回答
236 浏览

chart.js - Chart.js (v. 2.4) - 无论标签数量如何,如何修复饼图大小?

我正在使用 Chart.js 在我的网站上创建饼图(一页 3 个),我注意到图表的大小会根据标签的数量而有所不同。我想要的是将所有图表的饼图大小固定为相同,而不管标签的数量如何,并在下面显示标签。(目前正在发生的是画布边框定义了所有内容的轮廓)。

0 投票
1 回答
926 浏览

chart.js - Chart.JS 垂直线与 Moment.JS 水平轴

有没有办法使用 Chart.JS 2.0 创建垂直线(事件线、相变)?

我在网上看到了一些示例(请参阅此相关问题),但是,当使用 Moment.js 创建水平轴时,不可能给 LineAtIndex 一个 moment.js 日期以在该日期创建一条线。

这是一个演示问题的小提琴: https ://jsfiddle.net/harblz/0am8vehg/

我相信我的问题是我没有正确理解这段代码:

var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];

如果我能够弄清楚这一点,我将在这里为任何处理同一项目的未来用户发布一个工作小提琴。

感谢您花时间阅读本文:)

0 投票
0 回答
736 浏览

javascript - 在chart.js上对标签进行分组的方法?

有没有办法从 chart.js 的图例中对标签进行分组。观察我目前的情况: 在此处输入图像描述

我想对湿度标签、内部温度和外部温度进行分组。我可以通过单击显示/隐藏它们。例如,如果我单击单个湿度标签,则会显示内部和外部湿度。我也熟悉该功能generateLegend(),但文档并没有帮助我找到正确的解决方案。

0 投票
1 回答
1591 浏览

javascript - 将 Chart.js 水平条形图标签向右移动

如何将水平 Chart.js 条形图上的标签从左向右移动?这是左侧的当前标签。条形图仍应从左向右移动,但所有标签都应位于图表的最右侧,就好像它们向右浮动一样。

在此处输入图像描述

0 投票
1 回答
106 浏览

javascript - ChartJS 2.0 代码差异需要帮助

我无法将下面的代码转换为与 Chart.js 2.0 一起使用。我的图表对象是使用所需的...

我已经想出了如何创建我的自定义工具提示和自定义图例,但我似乎无法弄清楚以下项目。

首先,我在图表本身上绑定了一个点击事件,所以当用户点击它时,它会调用一个自定义函数,传入用户点击的段(饼图的一块)。在之前的 1.0 版本的 Chart.js 中,我可以调用下面的代码并且效果很好。它可以让我看到 .label 和属性以及该段的其他属性。

我想不通的另一件事是我想向我的自定义图例项添加一个 mouseenter 和 mouseleave 事件。当用户将鼠标悬停在图例项上时,它将弹出该段的正确工具提示。当他们鼠标离开时,工具提示关闭。这是我在 ChartJS 1.0 上使用的代码。

如果有人能帮我解决这个问题,我将不胜感激。谢谢!

0 投票
0 回答
131 浏览

chart.js - 将 yAxis 标签保持在 xAxis 线上方

我正在尝试创建一个图表,其中仅显示 y 轴的最小和最大标签。然后将这些标签旋转 90 度,使它们与直线平齐。这两个实现起来都相当简单,但是我现在遇到了一个我似乎无法解决的问题,即轴上的底部标签延伸到 x 轴线下方,并与 x 轴值重叠。

轴值重叠

这是我现在的输出。0km/h我要向上推的标签,使其0与x轴线一致。有什么方法可以做到这一点而无需创建自定义比例?