Столбчатая диаграмма Highcharts: создание цветовых групп - PullRequest
2 голосов
/ 04 февраля 2020

Я взял код из демоверсии highcharts. Столбцы в цвете. Я хотел бы изменить цвета, smt. нравится назначать синий цвет некоторым из них, а остальные оранжевым. Я публикую здесь код и ссылку в jsfiddle ниже. Вот код:

html:

<script src="https://code.highcharts.com/highcharts.js"></script

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing ...
    </p>
</figure>

js:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'World\'s largest cities per 2017'
    },
    subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '10px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'Population',
        data: [
        ['Shanghai', 24.2],
        ['Beijing', 20.8],
        ['Karachi', 14.9],
        ['Shenzhen', 13.7],
        ['Guangzhou', 13.1],
        ['Istanbul', 19.7],
        ['Mumbai', 12.4],
        ['Moscow', 14.2],
        ['São Paulo', 12.0],
        ['Delhi', 18.7],
        ['Kinshasa', 15.5]
        ],
        dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '10px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
    }]
});

https://jsfiddle.net/dcmpg1z2/1/

Я бы хотел видеть «Дели» и «Киншасу» оранжевым цветом. А остальные в разном цвете. Как я могу это сделать?

1 Ответ

1 голос
/ 04 февраля 2020

, если вы хотите, чтобы каждая категория имела разные цвета, вы должны установить colorByPoint на true и явно указать цвета для тех, которые вы хотите установить, передав объект с name, y и color свойство.

здесь скрипка

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