Как динамически изменить цвет линии на основе значения, которое ниже предыдущего в highcharts

Я пытаюсь построить линейный график, используя highchart.js, который использует зеленый и черный цвета. Данные извлекаются из базы данных SQL, и если значение выше предыдущего значения, оно становится зеленым. Если значение меньше предыдущего значения, то цвет черный.

Я новичок в этом и искал и искал, но единственное, что я нашел, это использование зон для изменения цветов.

Может ли кто-нибудь помочь мне в этом?

Привет и добро пожаловать на SO. Прочтите этот гид и отредактируйте свой вопрос.

— 23.03.2019 18:48

mysql highcharts

23.03.2019 18:43

Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков

В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...

Как построить CRUD-приложение в Laravel

Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...

Освоение PHP и управление базами данных: Создание собственной СУБД - часть II

В предыдущем посте мы создали функциональность вставки и чтения для нашей динамической СУБД. В этом посте мы собираемся реализовать функции обновления...

Документирование API с помощью Swagger на Springboot

В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .

Роли и разрешения пользователей без пакета Laravel 9

Этот пост изначально был опубликован на techsolutionstuff.com .

Как установить LAMP Stack - Security 5/5 на виртуальную машину Azure Linux VM

В предыдущей статье мы завершили установку базы данных, для тех, кто не знает.

172

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я создал этот пример, он должен вам помочь:

series: [{
  name: 'Random data',
  colorByPoint: true,
  data: (function() {
    // generate an array of random data
    var time = (new Date()).getTime(),
      i,
      yValue;

    for (i = -19; i <= 0; i += 1) {
      yValue = Math.random();

      if (i > -19 && yValue > data[data.length - 1].y) { // Green point
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      } else if (i > -19 && yValue <= data[data.length - 1].y) { // black point
        zones.push({
          color: "#000",
          value: time + i * 1000,
        });
      } else { // first point alway green
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      }
      data.push({
        x: time + i * 1000,
        y: yValue
      });
    }
    return data;
  }()),
  zoneAxis: "x",
  zones: zones
}]

Скрипка

Большое спасибо. Это определенно то, что я искал. Не могли бы вы также объяснить мне, что это делает и как это происходит? Также, если я изменил цвета, последняя точка всегда остается зеленой, и я не уверен, как это изменить. Спасибо!

— 28.03.2019 18:11

23.03.2019 21:12