使用Datatables.net中的迷你图条形图，是否可以仅突出显示图表上其他颜色的条形之一? [英] Using Sparkline bar charts in Datatables.net, can I highlight just one of the bars on the chart with a different color?

问题描述

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

I present bar charts in datatables.net using the configuration suggested by @KevinDasilva at https://stackoverflow.com/a/51749815/12417398 ... What I need is to add a properly placed red bar to either this bar chart, or to add an under or overlapping second chart with one-bar in a different color - I can find no documentation on this.

datatables.net表和图表如下:

The datatables.net table and chart looks as follows:

我不使用aocolumns，而是保留此datatables配置行，并直接在json中将文本添加到数据中-看起来像:

Rather than use aocolumns, I leave this datatables config-line out and add text to the data directly in json - which looks like:

[{"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 ...}]

任何经验，建议或工作示例都将不胜感激.

Any experience, suggestions, or working examples are greatly appreciated.

我很高兴地说这是一个小时的回答，并且两个库可以很好地协同工作...希望对其他人有所帮助，因为这是添加后非常有趣的工具.

I am pleased to say this was answered with an hour and the two libraries work well together ... I hope it helps others because this is a very interesting tool with this addition.

推荐答案

这使用 jQuery迷你图库.

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

If you use a 2-element array for each data point, you can create a stacked bar chart. You can then set all of the values to zero for one value in each pair, so there are never any actual stacks.

这使您可以控制颜色，就像您已将特定的条绘成不同的颜色一样.

This lets you control the colors, as if you had painted specific bars a different color.

在DataTables之外尝试此操作，作为演示:

Try this outside of DataTables, as a demo:

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

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

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

Note the [0,3] array, which will generate a red bar. All the other bars will be blue. These are the default colors:

您可以指定自定义颜色:

You can specify custom colors:

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

有关其他功能，请参见文档此处.

For additional features see the documentation here.

注意:

堆积的条形图需要 2.0或更高版本.

这篇关于使用Datatables.net中的迷你图条形图，是否可以仅突出显示图表上其他颜色的条形之一?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！