5

データに基づいて列の色を動的に設定できますが、凡例の色を変更する方法がわかりません。jsfiddle に注目してください。最新のバーは緑色ですが、凡例は青色です。列の色を変更すると凡例の色も変わる方法はありますか?

列の色に使用するコードは次のとおりです。

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

1 に答える 1

2

シリーズで色が変わります。seriesColor = colorUse;を追加してpreprocessData関数を変更することでこれを解決しました。. また、コードの先頭に seriesColor 変数を追加しましたvar seriesColor = '#000'; :

この新しい関数をコードに追加します。

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/

于 2013-03-18T04:48:14.600 に答える