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

这个问题在GitHub上已经解决了几次。

在搜索同一件事时，我已经找到了实现此目标的方法（稍作调整）。

事实上，这个Google搜索为我提供了很多有用的附加结果：“ 工具提示中的图表显示轴”

希望这会有所帮助;）

Answer 2

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

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

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

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

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);

我们开始吧！鼠标悬停工具提示现在还显示日期而不是仅显示 y 值！希望这可以帮助。 :)

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

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

2 个答案:

解决方案