根据数据更改图例颜色高图 [英] change legend color high charts based on data

问题描述

我可以根据数据动态设置列的颜色，但无法弄清楚如何更改图例中的颜色.请注意，在jsfiddle上，最新的条为绿色，但图例为蓝色.有没有办法改变列的颜色也改变图例的颜色?

I can dynamically set the color of a column based on data, but can't figure out how to change the color in the legend. Notice on the jsfiddle, the latest bar is green, but the legend is blue. Is there a way that changing the column color also changes the legend color?

这是我用于列颜色的代码:

Here is the code I use for the column color:

jsfiddle: http://jsfiddle.net/VCjZx/2/

jsfiddle: http://jsfiddle.net/VCjZx/2/

function makeRun() {
var divId = "container";
var current = new Array(99.95,99.96,99.97,99.98);
var goal = new Array(99.965, 99.965,99.965,99.965);
var quarters = new Array("Q1", "Q2", "Q3", "Q4");
    var width = 495; var SizeOfFont = '14px'; var currentName = 'Quarterly %';

    preprocessData = function (data, goal) {
        var nData = [];
        var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
        for (var i = 0; i < data.length; i++) {
            if (data[i] >= goal[i]) { colorUse = colorGood; }
            else { colorUse = colorBad; }
            nData.push({
                y: data[i],
                x: i,
                color: colorUse
            });
        }
        return nData;
    };

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: divId,
            height: 275, //little bigger than alotted height to make more readable
            width: width //dependent on #gauges
        },
        title: {
            text: 'Title', //should all be the same, can make a parameter if need to be different
            style: { //size of text above
                fontSize: SizeOfFont
            }
        },
        xAxis: {
            categories: quarters,
            labels: { //size of the Text above^^
                style: {
                    fontSize: '10px'
                }
            }
        },
        yAxis: {
            min: 99.8,
            max: 100,           
            title: {
                text: 'Percent', //parameter since some are days, percents, etc
                style: {//size of y axis title
                    fontSize: SizeOfFont
                }
            },
            labels: {
                style: {//size of the y axis tick labels
                    fontSize: SizeOfFont
                }
            }
        },
        credits: {//gets rid of the highcharts logo in bottom right
            enabled: false
        },
        legend: {//the legend at the bottom
            style: {
                fontSize: '12px'
            }
        },
        series: [ {
            type: 'column',
            name: currentName,
            data: preprocessData(current, goal),
            dataLabels: {
                enabled:true,
                color: 'black',
                formatter: function() {
                        return (Math.round(this.y*Math.pow(10,3))/Math.pow(10,3) + '%'); //rounds to 2 decimals
                    },
                    style: {
                    fontSize: '12px'
                }
            }
        },{
            type: 'spline',
            name: 'Goal',
            data: goal,
            color: '#084482',
            marker: {
                symbol: 'circle'
            },
            dashStyle: 'dash'
        }]
    });
}

推荐答案

颜色在系列中已更改.我通过添加 seriesColor = colorUse; 来修改您的 preprocessData 函数来解决此问题.我还将seriesColor变量添加到了代码的顶部 var seriesColor ='#000'; :

The color is changed in the series. I solved this by modifying your preprocessData function by adding seriesColor = colorUse;. I also added the seriesColor variable to the top of your code var seriesColor = '#000';:

将此新功能添加到您的代码中:

Add this new function to your code:

var seriesColor = '#000';
preprocessData = function (data, goal) {
    var nData = [];
    var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
    for (var i = 0; i < data.length; i++) {
        if (data[i] >= goal[i]) { colorUse = colorGood; }
        else { colorUse = colorBad; }
        nData.push({
            y: data[i],
            x: i,
            color: colorUse
        });
    }
    seriesColor = colorUse;
    return nData;
};

更新系列以包含seriesColor变量:

Update the series to include the seriesColor variable:

  series: [ {
      type: 'column',
      name: currentName,
      data: preprocessData(current, goal),
      color: seriesColor,
      ...

我更新了您的小提琴 http://jsfiddle.net/VCjZx/5/

这篇关于根据数据更改图例颜色高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！