更改HighCharts条形图中数据标签的颜色

Question

我想设置数据标签的颜色。我当前的代码在底部。

具体来说，我想使与灰色条和绿色条相对应的数据标签的颜色变为绿色。我该怎么办？

因此要澄清一下，例如，第一个条的值96.6将为灰色，而值45将为绿色。现在全黑了。

我非常感谢您的帮助。谢谢。

Highcharts.chart('container', {
    chart: {
        type: 'bar'
       
    },
    title: {
        text: null,
        align: 'center',
        verticalAlign: 'bottom',
       
        
        
    },
    
 
       xAxis: {
        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9','10','11-17','18-28', '29+'],
        title: {
            text: 'Visits Per Customer (TTM)'
        },
        
        
        
    },
    
    
    yAxis: {
        min: 0,
        title: {
            text: 'Average Return Rate Overall: 64 Days',
            y: 10
        },
        labels: {
            overflow: 'justify'
        }
    },
    
    /*
    
    tooltip: {
        valueSuffix: 'millions'
    },
    
    */
    
    
    tooltip: {
    
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.0f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    
    
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,        
            
                      
            }
        }
    },
    
    
    legend: {
        layout: 'horizontal',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 5,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    
    
    series: [{
        name: 'Q1 / 18 (TTM) Annual Guest Value',
        data: [0, 96.6 , 73.2 , 60.3 , 52.5 , 46.6 , 41.4 , 37.5 , 34.4 , 31.9 , 25.4 , 17.0 , 9.7],
        
        color: 'grey'
        
    }, {
        name: 'Days Between 1st and 2nd Visits',
        data: [23, 45, 65, 85, 105, 125 , 144 , 163 , 179 , 199 , 258 , 394, 847],
        color: 'green'
        
    }]
    
       
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 1

使用

dataLabels: {
  style: {
    color: 'the color you want'
  }
}

针对单个系列。

以供参考：dataLabels

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: null,
    align: 'center',
    verticalAlign: 'bottom',
  },
  xAxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11-17', '18-28', '29+'],
    title: {
      text: 'Visits Per Customer (TTM)'
    },
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Average Return Rate Overall: 64 Days',
      y: 10
    },
    labels: {
      overflow: 'justify'
    }
  },
  /*
  tooltip: {
      valueSuffix: 'millions'
  },
  */
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.0f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      }
    }
  },
  legend: {
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    x: 0,
    y: 5,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Q1 / 18 (TTM) Annual Guest Value',
    data: [0, 96.6, 73.2, 60.3, 52.5, 46.6, 41.4, 37.5, 34.4, 31.9, 25.4, 17.0, 9.7],
    color: 'grey',
    // label color
    dataLabels: {
      style: {
        color: 'grey'
      }
    }
  }, {
    name: 'Days Between 1st and 2nd Visits',
    data: [23, 45, 65, 85, 105, 125, 144, 163, 179, 199, 258, 394, 847],
    color: 'green',
    // label color
    dataLabels: {
      style: {
        color: 'green'
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>