Как установить для метки серии значение false по умолчанию и изменить цвет текста метки серии в highchart

У меня на странице 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>


javascript jquery highcharts timeserieschart
person Simsons    schedule 07.08.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Highcharts скрывает метки для каждой серии с помощью series.line.label.enabled переключатель. Чтобы скрыть метки для всех рядов на диаграмме, можно включить следующее ( plotOptions.series.label.enabled):

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

Точно так же, чтобы изменить цвет метки для серии серии. 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>

person ewolden    schedule 07.08.2018
comment
Поскольку вопрос требует метки серии только на одной из диаграмм, я думаю, может быть, использование plotOptions.series.label для настроек каждой диаграммы может быть уместным, чтобы избежать выполнения enabled: false для каждой серии на нескольких диаграммах? - person Halvor Holsten Strand; 07.08.2018
comment
Выглядит хорошо и решает актуальный вопрос. Я добавлю скрипку, где я установлю глобальное значение по умолчанию на false, что может стоить того, если есть много диаграмм, которые нужно отключить по отдельности: JSFiddle - person Halvor Holsten Strand; 07.08.2018
comment
@HalvorStrand, пометил это как ответ - person Simsons; 07.08.2018

arrow_upward
1
arrow_downward

Я думаю, вы хотите так: -

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>

person Rohit Verma    schedule 07.08.2018
comment
И это также меняет цвет серии. Мне нужно, чтобы цвет серии был таким, просто нужно обновить цвет метки. - person Simsons; 07.08.2018
comment
Я в замешательстве. Как этот адрес помечается только в 1 из 5 диаграмм по сравнению с кодом в вопросе? - person Halvor Holsten Strand; 07.08.2018
comment
@HalvorStrand, пометил это как ответ, поскольку он частично ответил на вопрос, хотя на 1 из 5 частей диаграмм нет ответа, и я просматриваю API диаграмм бедер. - person Simsons; 07.08.2018