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

Question

我使用@KevinDasilva 在建议的配置在 datatables.net 中展示条形图...我需要的是将正确放置的红色条添加到此条形图，或者添加一个下方或重叠的第二个图表，其中一个条形图颜色不同 - 我找不到这方面的文档。

datatables.net table 和图表如下：

我没有使用 aocolumns，而是保留了这个数据tables 配置行，直接在 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。

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

Using Sparkline bar charts in Datatables.net, can I highlight just one of the bars on the chart with a different color?

javascript

json

datatables

sparklines