Question

我可以根据数据动态设置列的颜色，但无法弄清楚如何更改图例中的颜色。关于jsfiddle的注意事项，最新的栏是绿色的，但传说是蓝色的。有没有办法改变列颜色也会改变图例颜色？

以下是我用于列颜色的代码：

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'
        }]
    });
}

Answer 1

系列中的颜色会发生变化。我通过添加 seriesColor = colorUse; 修改 preprocessData 功能来解决这个问题。我还将seriesColor变量添加到代码的顶部 var seriesColor =＆＃39;＃000＆＃39;; ：

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

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变量：

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

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

根据数据更改图例颜色高图表

1 个答案: