更改 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'
  }
}

對於個人系列。

供參考：數據標簽

 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>