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

Question

我使用@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.25,0.31,0.19,0.5 ,0.44,0.67,0.67,0.87,1.  <\/span>"},{each line repeats ...}]

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

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

Answer 1

这使用jQuery Sparklines 库。

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

这使您可以控制颜色，就好像您已将特定条形涂成不同的颜色一样。

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

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

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

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

您可以指定自定义颜色：

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

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

注意：

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