如果声明线颜色

时间:2015-03-24 11:15:26

标签: javascript if-statement colors highcharts

请你协助.. 我目前正在制作一张图表,其中包含两行,总需要行(黑色)和总收集行(红色或绿色)。我想在代码中添加一个if语句,用于识别该行是绿色还是红色。当它高于所需的总黑线时应该是绿色,当它低于所需的黑线时它应该是红色。在我的代码中,我已经根据场景规定了它的外观。

    $(function () {
$('#container').highcharts({
    title: {
        text: 'Total Contribution'
    },
    xAxis: {
        categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    },
    labels: {
        items: [{
            html: 'Student VS Total contribution',
            style: {
                left: '-10px',
                top: '0px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'John',
        tooltip: {
            pointFormat: '<b>{series.name}</b>: R{point.y:.0f}'
        },
        data: [3000, 2000, 1000, 3000, 4000, 6000, 7000, 8000, 7000, 9000, 6000, 9000]
    },

    {
        type: 'line',
        name: 'Total Needed',
        lineColor: Highcharts.getOptions().colors[1],
        tooltip: {
            pointFormat: '<b>{series.name}</b>: R{point.y:.0f}'
        },
        data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[1],
            fillColor: 'white'
        }

    }, {
        type: 'line',
        name: 'Total Collected - Good example',
        lineColor: Highcharts.getOptions().colors[6],
        tooltip: {
            pointFormat: '<b>{series.name}</b>: R{point.y:.0f}'
        },
        data: [3000, 5000, 7000, 7000, 9000, 10500, 11000, 12000, 12000, 13000, 14000, 14000],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[6],
            fillColor: 'white'
        }
    }, {
        type: 'line',
        name: 'Total Collected - BAD example', // The data in the columns does not match - it is an example
        lineColor: Highcharts.getOptions().colors[8],
        tooltip: {
            pointFormat: '<b>{series.name}</b>: R{point.y:.0f}'
        },
        data: [1000, 1000, 2000, 2000, 3000, 3000, 4500, 4500, 6000, 7000, 7000, 8000],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[8],
            fillColor: 'white'
        }
    },

    {
        type: 'pie',
        name: 'Contribution',
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.0f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        data: [{
            name: 'John',
            y: 25,
            color: Highcharts.getOptions().colors[0] // John's color
        }, {
            name: 'Total',
            y: 75,
            color: Highcharts.getOptions().colors[7] // Other's color
        }],
        center: [30, 45],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false,
            format: '<b>{point.name}</b>: {point.percentage:.0f} %'
        }
    }]
});
  });

另见: http://jsfiddle.net/warricksmith/ae4wajw2/

1 个答案:

答案 0 :(得分:0)

例如,如果要使用每个系列的平均值进行比较,可以这样:

1)为数组中的每个系列定义数据

2)计算“必需”系列的平均值。

3)将每个其他系列的平均值与该平均值进行比较,相应地定义每个系列的颜色

沿着:

var requiredAvg = getAvg(requiredData);
var requiredColor = 'black';
var goodColor = getAvg(goodData) > requiredAvg ? 'blue' : 'red';

示例: