问题描述
我使用@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。