Question

我的页面上有5张高位图表，我只需要在其中一张图表上贴上标签。

但是当我加入series-label.js时，它会向所有图表添加系列标签。

我还如何更改系列标签的颜色。例如，在下面的示例中，我需要所有系列标签都为黑色。

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },   
    series: [
    {
        name: 'Unites States',
        data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8]
    },
    {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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; height: 400px; margin: 0 auto"></div>

Answer 1

按图表隐藏标签的Highcharts方法是使用series.line.label.enabled切换键。要隐藏图表中所有系列的标签，可以进行以下切换（plotOptions.series.label.enabled）：

plotOptions: {
  series: {
    label: {enabled: false},
    ...
  }
}

类似地，要更改系列标签的颜色，可以使用series.line.label.style，或更改图表中所有系列的颜色（plotOptions.series.label.style）：

plotOptions: {
  series: {
    label: {style: {color: 'black'}},
    ...
  }
}

这将导致以下示例：

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: { text: 'No labels' },
    plotOptions: {
      series: {
        label: {
          enabled: false
        }
      }
    },
    series: [
    {
        name: 'Unites States',
        data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8]
    },
    {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

Highcharts.chart('container2', {
    chart: {
        type: 'line',
    },
    title: { text: 'Black labels' },
    plotOptions: {
      series: {
        label: {
          style: {
            color: 'black'
          }
        }
      }
    },
    series: [
    {
        name: 'Unites States',
        data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8]
    },
    {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 2

我想你想要这样：-

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },   
    series: [
    {
        name: 'Unites States',
        data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8],
	
    },
    {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
    }]
});

.highcharts-label text {fill: rgb(0, 0, 0) !important;}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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; height: 400px; margin: 0 auto"></div>

如何在默认情况下将系列标签设置为false并更改图表中系列标签文本的颜色

2 个答案: