问题标签 [chart.js2]

我正在生成一个看起来像这样的水平条形图：

我需要它看起来像这样：

也就是说，我需要将第 1 周（顶部/绿色条）和第 2 周（底部/橙色条）之间的百分比差异附加到第 2 周条。

我正在使用以下代码将 vals 添加到条本身：

...但不知道如何进行计算并将其附加到条的末尾。

对于完整的“monty”，这里是这个图表的 jQuery 的其余部分：

更新

Tektiv 的代码看起来很有前途，但由于某种原因，它完全打破了我的图表。用我的代码：

...我看到了这个：

用新代码替换上面的代码：

...我看到了这个：

我不知道为什么 - 新代码看起来不错，AFAICT。

更新 2

更新后的代码稍微好一点，但它仍然扭曲了其他图表：

更新 3

显然这是决斗 OnDraw() 事件的问题；我也有这个针对价格合规图表：

我正在使用 Chart.JS 创建一个相当简单的饼图，如下所示：

它看起来不错：

...但我想要左边的饼图和右边的图例，图例垂直堆叠。我怎样才能实现这个目标？

更新

我试过这个：

CSS

HTML

...正如在此处接受的答案中所建议的那样，但这没有任何区别。

更新 2

修复错误 ID 会导致新图例显示，并在选项中添加“display: false”会导致原来的图例消失，但新图例仍然出现在饼图下方，拥挤在其 div 之外并渗入下方的象限它（显示为悬停在香蕉上）：

更新 3

以下是应用接受的答案代码后的外观：

馅饼仍然微不足道，但这比以前好多了（并回答了问题）。

当悬停在一块饼上时，我有一个饼图，看起来像这样：

除了想要将图例放在右边而不是顶部之外，我对此非常满意，但我只希望百分比值在饼图中“始终”显示 - 并且仍然<name> (<%val>): <data>在悬停时显示。

换句话说，我希望馅饼看起来像这样：

我怎样才能把那一段数据（百分比）分解出来，然后把它画到每一块饼上？

这是我到目前为止使用的代码：

我是否需要添加 afterDraw() 事件，如果需要，它需要如何实现？

更新

我尝试向图表构造函数添加一个 onAnimationComplete() 回调：

...但它什么也没做。

更新 2

我还尝试将以下内容附加到选项对象：

...具有相同的结果（没有变化）。

更新 3

好的，我希望这里的答案能够奏效，并根据那里的答案为我的饼图提供了这个新代码：

添加到 optionsPie：

在检索到元素的引用后添加：

在构造饼图实例后添加：

添加了函数 drawSegmentValues()

在上下文中（没有双关语）：

...但它完全冲洗了所有三个图表，没有留下任何可见/绘图。

更新 4

顺便说一句，我尝试了给定的答案，但没有结果/更改 - 它仍然按照设计显示悬停数据，但没有其他任何内容。

此外，相关的小提琴同时显示了价值和百分比；由于房地产限制，我只希望百分比是“永远在线”——“整个辣酱玉米饼馅”只有在悬停时才能看到。

我正在创建一个像这样的条形图：

这看起来像这样：

我想要做的是在最后一个栏（蓝色的）上方添加一个标签，在前一个/第四个和那个之间有一个百分比差异。在这种情况下，该值应为“+5.2%”，使其如下所示：

我认为这将需要注册 afterDraw() 事件，但它应该是什么样子的细节超出了我的范围。

更新

如果我将此添加到建议的代码中：

在上下文中：

...结果比没有它要好一些（它破坏了我的第一个（饼图）图表并完全消除了接下来的两个（包括这里讨论的那个）：

正如你所看到的，饼图仍然被冲洗，两个条形图中的值被缩小了，就好像一个食人部落对它们实施了邪恶的把戏。而且，在最后一个条形顶部没有任何附加值。

我正在使用 Charts.JS 创建一个看起来相当不错的堆积条形图：

不过，我需要的是让每个条形完全填充网格，并且绿色值是百分比，而不是绝对值，并且红色值以同样的方式为 100% - 无论绿色值的百分比是。

IOW，对于上面屏幕截图中显示的值，我需要每个栏遍历整个宽度，并且以顶部栏为例，绿色部分上“标记”的文本应该是“99%”

“99%”标签应该取代“17,724”，“170”应该完全消失。

这是目前使用的数据：

...然后将其添加到图表中，如下所示：

想到的是像这样更改数据：

...然后使用第一个数据值作为标记绿色部分的值，并在其上附加一个“%”。

这是一个明智的做法吗？有没有更好的办法？

更新

建议的 beforeInit/afterDraw 不起作用；导致我或多或少可以接受的图表：

......比一个失控的消防站更紧张：

...即使我将此作为两个函数的第一行添加：

我的图表有这些数据：

...看起来像这样：

如您所见，第一个数据点 (99.0) 显示为 99，截断了“.0”部分。

当然，这有一些逻辑，但 GUI 纳粹希望保留“.0”。

我需要做什么才能强制显示甚至“无意义”的数据部分？

更新

afterDraw() 事件，对于 Jaromanda X：

我正在生成一个带有图例的饼图，如下所示：

如您所见，馅饼微不足道。我更喜欢它高一倍，宽一倍。

这是我正在使用的代码：

我怎样才能增加馅饼的大小？

更新

Nkosi 要求的“视图”是：

“row”和“col-md-6”类是 Bootstrap 类。

自定义类是“左上角”：

...部分文本：

...和“pieLegend”：

我正在使用ionic framework制作一个应用程序，我使用chart.js在图表中显示一些数据......

我基本上是在尝试制作一个条形图，其中我只有一个水平条，它模拟了多年来的活动状态，如下图所示：

我找不到任何可以帮助我的东西，我开始用线条制作它，但我需要使用几个工具，比如grandient, Chart.controllers.line.extend，它开始看起来更像是一种解决方法......它并没有那么好用做它很有意义......

有没有办法我可以做到这一点？或者你知道我应该调查什么来实现这一目标吗？

我有一个水平条形图，显示如下：

由于条形图上的第二个数据值（1.0、0.8 等）被部分遮挡，我想按优先顺序执行以下操作之一：

1. 将它们向左移动，使它们完全可见
2. 将它们的字体从白色改为背面，使它们完全可见
3. 完全删除它们，使它们完全不可见

导致它们被写在第一个（第二个？）位置的代码是这样的：

...但我没有看到我可以在哪里根据需要操纵这些值。

对于上下文和全面披露，这里是图表的所有代码：

我正在使用 Chart.js 版本 2.2.2

由于在条形图的最后一个条形上方放置标签似乎不可能或非常困难（这里没有工作答案），我现在想知道如何在最后一个条形内放置标签。

我正在使用以下代码向水平条形图的所有条形添加标签：

该工作图表如下所示：

...但这是一个“常规”（垂直）条形图，我尝试将标签添加到最后一个条形图，如下所示：

...失败（没有任何显示，事实上，它不仅会导致其外观出现问题，还会导致页面上其他图表出现问题，即使我使用代码仅将此事件应用于此特定图表：

那么如何计算一个值（基于最后一个和倒数第二个条形值），然后将计算出的“标签”放置在 Chart.JS 条形图中的最后一个条形内？

使用我上面尝试的代码，我现在只想获取条内条的原始值；逻辑的计算部分可以留到以后。

一种可能性是使其成为堆叠条形图，除了最后一个条形之外，没有任何其他条形添加任何内容，然后将其背景颜色设为白色以与图表背景融为一体......

更新

我尝试了我的最后一个想法；想也许我可以通过将图表变形为堆叠条形图（从简单的条形图）来完成我想要的，添加第二组大部分“零”数据作为堆栈的第二部分，如下所示：

旧代码摘录：

新代码：

但这根本没有帮助。我究竟做错了什么; 如果一切顺利，在用我的新代码追求核选项后，我该如何继续？

更新 2

来自 Hung Tran 的代码让我很接近。我现在的选择是：

...并将数据值放在每个条形上方。

如前所述，这接近我想要的；不过，我真正想要的是最后一个值和当前值之间的差异。例如，使用此图表：

...我想看到的是：

240、272 (30)、250 (-22)、232 (-18)、244 (12)

或者可能只是最后一个柱上方的一个值，“ 244 (12) ”或“ 12 ”。

这就是他们所说的（后者），但如果他们改变主意并想要所有的 vals/diffs，我不会感到惊讶。

更新 3

该解决方案在条形顶部不添加任何值，并吃掉我的一块馅饼：

更新 4

这是Index.cshtml中几乎所有的代码：