线条颜色的 if 语句

Question

请你帮忙.. 我目前正在制作一个图表，其中有两条线，一条总需要线（黑色）和一条总收集线（红色或绿色）。我想在代码中添加一个 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/

Answer 1

例如，如果您想使用每个系列的平均值进行比较，您可以这样：

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

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

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

大致如下：

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

示例：

• http://jsfiddle.net/jlbriggs/te2zxo88/