Высокие диаграммы определяют цвета для каждой точки данных в паре - PullRequest
1 голос
/ 27 марта 2020

Я хочу определить два пользовательских цвета, один для мужчин и другой для женщин.

У меня есть простая столбцовая диаграмма, которая отображает мужчин и женщин по возрасту. Есть 7 пар точек данных. Имеется в виду 1 пара точек данных для мужчин и женщин в возрасте 0–39 лет, другая пара для мужчин и женщин в возрасте 40–49 лет и т. Д. Цвета диаграммы по умолчанию: голубой и черный.

Я хочу изменить эти цвета, скажем, зеленый и оранжевый. colorByPoint не отвечает моим потребностям, поскольку он окрашивает каждую пару данных в разные цвета. Какое решение?

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Average Life Expectancy'
        },
        xAxis: {

            categories: ['0-39', '40-49', '50-59', '60-69', '70-79', '80-89', '90+'],
            title: {
                text: null
            }
        },

        yAxis: {
            min: 0,
            title: {
                text: 'Breakdown by gender',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            column: {
              colorByPoint: true,

                dataLabels: {
                    enabled: true
                }

            }


        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },

        series: [{
            name: 'Males',
            data: [10, 7, 4, 12, 27, 21, 2],


        }, {
            name: 'Females',
            data: [10, 3, 5, 12, 15, 10, 11]
        }]

    });

Ответы [ 2 ]

1 голос
/ 27 марта 2020

это работает для меня

series: [{
        name: 'Males',
        data: [10, 7, 4, 12, 27, 21, 2],
        color: '#008000'

    }, {
        name: 'Females',
        data: [10, 3, 5, 12, 15, 10, 11],
        color: "#FFA500"
    }]
0 голосов
/ 27 марта 2020

Вам нужно просто определить цвет для серии:

  series: [{
    ...,
    color: 'green'
  }, {
    ...,
    color: "orange"
  }]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4934/

Справочник по API: https://api.highcharts.com/highcharts/series.column.color

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...