Question

我想设置一个固定的放置列集，其中比较相应的系列数据，如果一个片段趋势低于基线，则该颜色将发生变化。

例如，在此处显示的默认固定展示位置列集：http://jsfiddle.net/a8Dg2/

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Efficiency Optimization by Branch'
    },
    xAxis: {
        categories: [
            'Seattle HQ',
            'San Francisco',
            'Tokyo'
        ]
    },
    yAxis: [{
        min: 0,
        title: {
            text: 'Employees'
        }
    },{
        title: {
            text: 'Profit (millions)'
        },
        opposite: true
    }],
    legend: {
        shadow: false
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Employees',
        color: 'rgba(165,170,217,1)',
        data: [150, 73, 20],
        pointPadding: 0.3,
        pointPlacement: -0.2
    }, {
        name: 'Employees Optimized',
        color: 'rgba(126,86,134,.9)',
        data: [140, 90, 40],
        pointPadding: 0.4,
        pointPlacement: -0.2
    },{
        name: 'Profit',
        color: 'rgba(248,161,63,1)',
        data: [183.6, 178.8, 198.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: .3,
        pointPlacement: 0.2,
        yAxis: 1
    },{
        name: 'Profit Optimized',
        color: 'rgba(186,60,61,.9)',
        data: [203.6, 198.8, 208.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: .4,
        pointPlacement: 0.2,
        yAxis: 1
    }]
});

}）;

在Seattle HQ，由于Employees Optimized的趋势低于Employees列，我希望Employees Optimized的颜色根据两个系列之间的相应数据之间的值动态变为绿色。

基本上和如果x＆lt; y，颜色：绿色。

非常感谢你的帮助。

Answer 1

你有2个选择。您可以预处理数据并在data数组中添加颜色属性，使其看起来像：

{
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [{y: 140, color: 'green'}, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }

或者您可以使用chart.events.load功能动态分配颜色。在此函数中，您可以遍历系列数据点（假设您正在查看'{1}}的'员工优化'。然后将每个点与series[1]（'Employees'）中的相同索引点进行比较。然后，如果满足您的条件，请更新点的颜色。这是一个非常详细的方法：

series[0]

直播 demo 。

Highcharts - 柱形图：比较相应的值以更改颜色

1 个答案: