Chartist.js - 工具提示中的点值和 X 标签？

Question

我有一个带有点的 Chartist.js 折线图，并且我正在使用工具提示，因此当您将鼠标悬停在某个点上时，您将获得该点的值。我还想在其中添加 X 轴的标签，这样...

$chart.on('mouseenter', '.ct-point', function () {
  const $point = $(this);
  const label = Number($point.attr('ct:label')); // doesn't work
  const value = Number($point.attr('ct:value')); // does work
  $toolTip.html(value + ' at ' + label).show();
});

...将显示点的值加上索引（X 轴标签）。

Answer 1

我迟到了 3 年，但也许其他人仍然有同样的问题。

我在按日期显示欧元金额的条形图上遇到了类似的问题。工具提示仅显示每个条的数量（y 值），但我还希望它显示该条的日期（x 值）。

Chartist.js 和工具提示插件为此提供了内置解决方案 - 尽管这既不直观也没有很好的文档记录。所以不涉及特殊的 CSS 或 JS 黑客攻击。您只需要修改您的系列数据数组。

在这样做之前，我的数据数组看起来像这样（简化）：

var regularData= [];
// [...]
regularData.push(427615440);
regularData.push(428134236);
regularData.push(428543629);
// [...]

var graphData = {
    series: regularData
};

new Chartist.Bar('#chart-container', graphData, options);

所以在这种情况下，我有一个条形图，其中每个条形都有一个值，该值也显示在工具提示中。现在我想添加日期。

解决方案

不是将值直接推送到数组，您需要将容器对象推送到它，其中包含“元”和“值”的键值对，其中meta 指定x 值和 value 指定 y 值。 注意：“元”值可以是任意值，不需要与你的数据/轴中的x值一致。

var labeledData = [];
// [...]
labeledData.push({meta: "15.12.", value: 427615440});
labeledData.push({meta: "16.12.", value: 428134236});
labeledData.push({meta: "17.12.", value: 428543629});
// [...]

var graphData = {
    series: [labeledData]
};

new Chartist.Bar('#chart-container', graphData, options);

我们开始吧！ mouesover-tooltip 现在也显示日期而不是仅显示 y 值！希望这可以帮助。 :)

旁注：为简单起见，我省略了工具提示格式（欧元值）和自定义 CSS（粗 y 值）。