Блог

Главная - Вопросы по программированию - HighCharts: возможно ли настроить цвета отдельных серий?

HighCharts: возможно ли настроить цвета отдельных серий?

#javascript #graph #highcharts

#javascript #График #highcharts

Вопрос:

Я использую HighCharts для отчета о линейном графике. В этом конкретном отчете меня попросили настроить цвета каждой серии. Серия всегда будет оставаться неизменной. Так, например:

Серия Джона: синяя пунктирная линия Серия Мэри: сплошная красная линия

Кто-нибудь знает, как это сделать?

Ответ №1:

Параметры могут быть установлены отдельно для каждой серии.

 var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'John',
        color: '#0066FF',
        dashStyle: 'ShortDash',
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 2, 1), 71.5],
            [Date.UTC(2010, 3, 1), 106.4]
        ]
    },{
        name: 'Mary',
        color: '#FF0000',
        data: [
            [Date.UTC(2010, 0, 1), 60.9],
            [Date.UTC(2010, 1, 1), 40.5],
            [Date.UTC(2010, 2, 1), 90.0],
            [Date.UTC(2010, 3, 1), 80.4]
        ]
    }]
});

Пример JsFiddle

Комментарии:

1. Спасибо за это! В справочных документах создавалось впечатление, что вы можете задавать параметры только для всех серий. Я подумал, что это странно, когда увидел это, но это проясняет ситуацию.

2. Можете ли вы сделать этот цвет условным? Интересно, можно ли получить доступ к цвету через форматировщик.

Ответ №2:

Если вы прочитаете api здесь, вы увидите следующий текст.

Серия

Фактический ряд для добавления к диаграмме. В дополнение к элементам, перечисленным ниже, любой элемент plotOptions для этого конкретного типа графика может быть добавлен в ряд по отдельности. Например, даже несмотря на общие lineWidth указанного в plotOptions.series , Человек lineWidth может быть указано для каждой серии.

Таким образом, вы можете добавить что угодно из plotOptions .

ДЕМОНСТРАЦИЯ:

 series: [{
    name: 'serie1',
    data: [0,1,2,3,4,5,6,7,8,9],
    color: '#FFFF00',
    lineWidth: 4,
    id: 'serie1',
    step: true
}]

Рабочая демонстрация