代码之家 › 专栏 › 技术社区 › R2D2

jqPlot-条形图-始终仅使用颜色最高值

jqplot jquery

0

R2D2 · 技术社区 · 8 年前

我有一个页面,其中有一个条形图,当用户单击通过ajax调用更新的数据表中的表行时,该条形图会更新。

绘图数据不是固定的。

我需要始终将最大值/最高条涂成橙色。显然,最高的条可能是绘图中的任何一条。

如何使用jqplot以有效的方式做到这一点?

我看到过各种系列颜色的条的例子,但我只需要一种颜色,所有条都是蓝色,除了最大值,它需要是橙色。

我看不出有什么办法。

1 回复 | 直到 8 年前

1

0

R2D2 8 年前

我想出了一个解决方案,并使其发挥作用。它不是很优雅,但很管用!

酒吧的颜色只是一个数组,所以我这样做是为了。。。

1) 所有条形图的颜色相同

 var colorArray = ['#4bb2c5','#4bb2c5','#4bb2c5','#4bb2c5','#4bb2c5','#4bb2c5','#4bb2c5'];

2) 查找最大数据值

 var maxValue = Math.max(data01,data02,data03,data04,data05,data06,data07);

3) 如果数据为最大值,则更改颜色数组值

if (data01 == maxValue) { colorArray[0] = '#fbbc05'; }
else if (data02 == maxValue) { colorArray[1] = '#fbbc05'; }
else if (data03 == maxValue) { colorArray[2] = '#fbbc05'; }
else if (data04 == maxValue) { colorArray[3] = '#fbbc05'; }
else if (data05 == maxValue) { colorArray[4] = '#fbbc05'; }
else if (data06 == maxValue) { colorArray[5] = '#fbbc05'; }
else if (data07 == maxValue) { colorArray[6] = '#fbbc05'; }

4) 设置条形图

var bar_options = {
 axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
 seriesColors: colorArray,
 seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { highlightMouseOver:false, barMargin:5, shadowOffset:1, varyBarColor:true } },
 axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } }
 };

这是可行的!

希望这对其他人有帮助!