I am using jqPlot to draw an area graph with series defaults fill: true, fillToZero: true
with useNegativeColors
default to true
. I can change the color
and fillColor
but I did not find a way how to change the line color or fill color below zero x-axis line. I want a positive value with green color and a negative value red color. Currently negative value default to blue. Here is the jqPlot option:
var chartOptions = {
title: { show: false },
axesDefaults: {
show: false,
showGridline: false,
borderWidth: 0,
showTicks: false,
showTickMarks: false,
tickOptions: {
show: false,
showLabel: false,
showMark: false,
showGridline: false
}
},
axes: {
xaxis: { min: 0, max: 10 },
yaxis: { min: -5, max: 5 }
},
seriesDefaults: {
fill: true,
fillToZero: true,
fillAndStroke: true,
color: "rgba(190,230,110, 0.8)",
fillColor: "rgba(206,236,145, 0.8)",
shadow: false,
showMarker: false,
lineWidth: 1,
rendererOptions: {
highlightMouseOver: false
}
},
legend: { show: false },
grid: {
drawGridLines: false,
background: "rgba(255,255,255,0)",
shadow: false
开发者_运维百科}
};
Edit: Add info: currently negative value default to blue
I just found it in source code some thing like:
this.negativeSeriesColors = [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", "#959E5C", "#C7AF7B", "#478396", "#907294"];
It is mention in the fillToZero example: http://www.jqplot.com/tests/fillToZero.php
The fillToZero series option will create a chart where lines or bars are filled down or up toward the zero axis line. The portion of the line below zero will be shaded darker than the portion above zero. These colors can be customized with the "negativeSeriesColors" option. Positive values are colored according to the "seriesColors" option.
but don't have in the documentation all available options.
So I add the negative color like this:
var chartOptions = {
...,
negativeSeriesColors: ["#F94545", ...],
};
$.jqplot('chart1', data, chartOptions);
精彩评论