jQplot 条形颜色错误与负值
jQplot Bar Colours Are Wrong With Negative Values
见附图,当值为 0 或以下时,条形颜色是错误的。我有这样的代码集:
seriesColors:['#09c700','#ff0000','#3854ff']
negativeSeriesColors:['#09c700','#ff0000','#3854ff']
似乎当值为 0 或更低时它会跳过颜色。我的颜色设置已设置,因此第一个栏应该是 green,第二个是 red,第三个是 blue , 但您可以看到它使第二个条形图(中间)变成蓝色,最后一个条形图变成红色,这只是因为中间的条形图是负值。
这是因为它使用的是 "negative" 颜色,与您定义的 "positive" 颜色不同。您可以在系列渲染选项中使用 useNegativeColors: false
禁用负色。
$(document).ready(function(){
var line1 = [['Nissan', 4],['Porche', -6],['Acura', 2]];
$('#chart').jqplot([line1], {
title:'Bar Chart with Custom Colors',
seriesColors:['#09c700','#ff0000','#3854ff'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
fillToZero: true,
useNegativeColors: false
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<div id="chart"></div>
见附图,当值为 0 或以下时,条形颜色是错误的。我有这样的代码集:
seriesColors:['#09c700','#ff0000','#3854ff']
negativeSeriesColors:['#09c700','#ff0000','#3854ff']
似乎当值为 0 或更低时它会跳过颜色。我的颜色设置已设置,因此第一个栏应该是 green,第二个是 red,第三个是 blue , 但您可以看到它使第二个条形图(中间)变成蓝色,最后一个条形图变成红色,这只是因为中间的条形图是负值。
这是因为它使用的是 "negative" 颜色,与您定义的 "positive" 颜色不同。您可以在系列渲染选项中使用 useNegativeColors: false
禁用负色。
$(document).ready(function(){
var line1 = [['Nissan', 4],['Porche', -6],['Acura', 2]];
$('#chart').jqplot([line1], {
title:'Bar Chart with Custom Colors',
seriesColors:['#09c700','#ff0000','#3854ff'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
fillToZero: true,
useNegativeColors: false
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<div id="chart"></div>