jqPlot - 条形图 - 始终只着色最高值答案

【问题标题】：jqPlot - bar chart - always color only highest valuejqPlot - 条形图 - 始终只着色最高值
【发布时间】：2018-04-25 13:38:10
【问题描述】：

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

EG：绘图数据不固定。

我需要始终将最大值/最高条着色为橙色。显然，最高的条可能是图中的任何一条。

如何通过 jqplot 高效地做到这一点？

我已经看到了以各种系列颜色着色的条形示例，但我只需要一种颜色，所有条形都是蓝色的，除了最大值，它需要是橙色。

我看不出有什么办法。

【问题讨论】：

标签： jquery jqplot

【解决方案1】：

我想出了一个解决方案并让它发挥作用。它不是很优雅，但很有效！

条形颜色只是一个数组，所以我这样做是为了...

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 } }
 };

而且它有效！

希望这对其他人有帮助！

【讨论】：