Highcharts.js设置更改列颜色的阈值
我想知道是否有人可以帮我修改这个Highcharts线图： http ： //jsfiddle.net/highcharts/PMyHQ/到列图仍然保持阈值着色（红色表示值> 0;蓝色表示值<0） 。
问题是如果您只是更改图表类型，请type:'column' ，然后基于阈值的着色将丢失，所有列都将显示为蓝色。
执行颜色更改的函数是applyGraphGradient() 。 我无法弄清楚如何更改此function以保留基于阈值的着色。
/** * Event handler for applying different colors above and below a threshold value. * Currently this only works in SVG capable browsers. A full solution is scheduled * for Highcharts 3.0. In the current example the data is static, so we don't need to * recompute after altering the data. In dynamic series, the same event handler * should be added to yAxis.events.setExtremes and possibly other events, like * chart.events.resize. */ function applyGraphGradient() { // Options var threshold = 0, colorAbove = '#EE4643', colorBelow = '#4572EE'; // internal var series = this.series[0], i, point; if (this.renderer.box.tagName === 'svg') { var translatedThreshold = series.yAxis.translate(threshold), y1 = Math.round(this.plotHeight - translatedThreshold), y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2 // Apply gradient to the path series.graph.attr({ stroke: { linearGradient: [0, y1, 0, y2], stops: [ [0, colorAbove], [1, colorBelow] ] } }); } // Apply colors to the markers for (i = 0; i < series.data.length; i++) { point = series.data[i]; point.color = point.y < threshold ? colorBelow : colorAbove; if (point.graphic) { point.graphic.attr({ fill: point.color }); } } // prevent the old color from coming back after hover delete series.pointAttr.hover.fill; delete series.pointAttr[''].fill; } // Initiate the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', events: { load: applyGraphGradient }, defaultSeriesType : 'column' }, title: { text: 'Average monthly temperature' }, yAxis: { plotLines: [{ value: 0, color: 'silver', width: 2, zIndex: 2 }], title: { text: 'Temperature (°C)' } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ name: 'Temperature (°C)', data: [-2, -3, -2, 2, 5, 9, 11, 11, 10, 8, 4, -1] }] });
使用Highcharts绘图API，它也可以在VML浏览器中使用： http ： //jsfiddle.net/highcharts/XndxH/
这个怎么样：
function applyGraphGradient() { // Options var threshold = 0, colorAbove = '#EE4643', colorBelow = '#4572EE'; // internal var someSeries = this.series[0]; $.each(someSeries.points, function(){ if (this.y < threshold) { $(this.graphic.element).attr('fill', colorBelow); } else { $(this.graphic.element).attr('fill', colorAbove ); } }); delete someSeries.pointAttr.hover.fill; delete someSeries.pointAttr[''].fill; }
在这里看小提琴。
您所指的阈值为0.对于柱形图，您可以单独设置每个条形的颜色，如下所示： 示例