在 Datatables.net 中使用 Sparkline 条形图，我可以只用不同颜色突出显示图表上的一个条形吗？

如何解决在 Datatables.net 中使用 Sparkline 条形图，我可以只用不同颜色突出显示图表上的一个条形吗？

我使用@KevinDasilva 在 https://stackoverflow.com/a/51749815/12417398 处建议的配置在 datatables.net 中显示条形图......我需要的是在此条形图中添加一个正确放置的红色条，或者添加一个下或用不同颜色的一个条形重叠第二个图表 - 我找不到关于此的文档。

datatables.net 表格和图表如下所示：

我没有使用 aocolumns，而是将这个数据表配置行去掉，直接在 json 中向数据添加文本 - 看起来像：

[{"Color":"2-Yellow","Indicator":"Export per Capita","TEP Chart":"<img src=\"Export.per.Capita.jpg\">","Chart":"<span class=\"spark\">0.,0.,0.25,0.19,0.31,0.5,0.44,0.67,0.87,1.  <\/span>"},{each line repeats ...}]

非常感谢任何经验、建议或工作示例。

我很高兴地说，这个问题在一个小时内得到了答复，两个库协同工作得很好......我希望它可以帮助其他人，因为这是一个非常有趣的工具。

解决方法

这使用了 jQuery Sparklines 库。

如果对每个数据点使用 2 元素数组，则可以创建堆积条形图。然后，您可以将每对中的一个值的所有值都设置为零，这样就不会出现任何实际堆栈。

这让您可以控制颜色，就像您为特定的条形涂上了不同的颜色一样。

在 DataTables 之外试试这个，作为演示：

<span class="bar1"></span>

$('.bar1').sparkline([ [1,0],[2,[0,3],[4,0] ],{ type: 'bar' });

注意 [0,3] 数组，它将生成一个红色条。所有其他条形都将为蓝色。这些是默认颜色：

您可以指定自定义颜色：

$('.bar1').sparkline([ [1,{ type: 'bar',stackedBarColor: ['red','green'] });

有关其他功能，请参阅文档 here。

注意：

堆积条形图需要 version 2.0 or higher。