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

Posted 2023-05-07

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

【英文标题】：Using Sparkline bar charts in Datatables.net, can I highlight just one of the bars on the chart with a different color?

【发布时间】：2021-04-06 12:45:07

【问题描述】：

我使用@KevinDasilva 在https://***.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 ...]

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

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

【参考方案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。

【讨论】：

对于那些使用 Datatables.net 的人，您可以跳过 aocolumndef: 并从 json 串行字符串 ["Chart":"0.20 : 0.00, 0.11: 0.00, 0.12: 0.00, 0.06: 0.00, 0.29: 0.00, 0.47: 0.00, 0.65: 0.00, 0.41: 0.00, 0.69: 0.00, 0.00: 0.56, 0.71: 0.0>"/pan>"值":53584663045.8999023438,"code":"NY.ADJ.NNAT.CD"]