jqPlot

Question

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

EG：剧情数据不固定

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

如何使用 jqplot 以高效的方式做到这一点？

我见过用各种系列颜色着色的条形图的例子，但我只需要一种颜色，所有条形图都是蓝色的，除了最大值，它需要是橙色。

我看不出有什么办法可以做到这一点。

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

而且有效！

希望这对其他人有帮助！

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

jqPlot - bar chart - always color only highest value

jquery