Условные символы в Highcharts

Question

Я пытаюсь создать линейную диаграмму, показывающую использование Интернета в день для определенного количества машин. Я хочу использовать символ, как показано на рисунке here in Highcharts documentation, когда превышен определенный предел данных. Например, где бы то ни было использование выше 2,5 ГБ, я хочу, чтобы он отображал символ предупреждения и выше 3 ГБ другой символ. Значения ниже, чем те, которые должны отображаться обычными маркерами. Эти значения будут извлекаться из динамически созданных CSV-файлов, поэтому я не могу их жестко закодировать, как указано в документации. Необходимо указать условие, при котором маркер будет заменен символом автоматически, если условие выполнено. Как я могу это достичь?

Ниже мои данные серии

series: [{ 
     name: '<Machine Ip>', 
     data: [1.60, 3.60, 1.70, 2.70, 0.40] 
    }, { 
     name: '<Machine Ip>', 
     data: [0.20, 3.40, 2.10, 2.30, 1.40] 
    }, { 
     name: '<Machine Ip>', 
     data: [2.20, 1.40, 2.80, 0.60, 2.80] 
    }] 

Я сожалею, что я не могу разделить другой код из-за соображений конфиденциальности. Я не применял никакой логики до тех пор, пока я не смог ее вызвать. IP-адрес машины динамически получается из значений, переданных с предыдущей страницы. В этом месте есть переменная. Просто замените это на <machine ip>, чтобы прояснить ситуацию.

Спасибо заранее

Answer 1

Вы можете использовать аргумент обратного вызова из highcharts() функции для обновления каждый точек в зависимости от его значения. Я сделал пример на температурной диаграмме, JSFiddle: http://jsfiddle.net/qot0pjhp/

Важная часть кода:

$('#container').highcharts({ 
    /* ... */, 
    function (chart) { 
     $.each(chart.series[0].points, function (i, v) { 
      if (v.y >= 25) { 
       v.update({ 
        marker: { 
         symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' 
        } 
       }) 
      } else if (v.y >= 15) { 
       v.update({ 
        marker: { 
         symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' 
        } 
       }) 
      } 
     }); 
    }); 

Так вот каждая точка выше 25 будет иметь солнце как маркер, каждая точка выше 15 будет иметь снежное облако, и все остальные точки будут иметь маркер, определенный в plotOptions.

EDIT

Если у вас есть несколько серий, вы можете просто изменить его:

function (chart) { 
    $.each(chart.series, function(index, serie_item) { 
      $.each(serie_item.points, function (i, v) { 
       /* ... */ 
      }); 
    }); 
}); 

Answer 2

Вместо обновления, вы можете предобработки ваши данные после того, как вы получите CSV, демо: http://jsfiddle.net/grLf9jn0/

Отрывок:

$.each(parsedDataFromCSV, function (i, v) { 
    parsedDataFromCSV[i] = { 
     y: v, 
     marker: v > 15 ? { 
      symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' 
     } : (v > 10 ? { 
      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' 
     } : {}) 
    }; 
}); 

Или событие лучше: при анализе данных из CSV в объекты JS добавьте условия для установки маркера.

Edit:

При использовании модуля data.js используйте data.complete обратного вызова, например:

data: { 
     csv: document.getElementById('csv').innerHTML, 
     complete: function (options) { 
      $.each(options.series, function(j, series) { 
       $.each(series.data, function(i, v) { 
        series.data[i] = { 
        y: v[1], 
        x: v[0], 
        marker: v[1] > 0.5 ? { 
         symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' 
        } : (v[1] < 0 ? { 
         symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' 
        } : {}) 
        }; 
       }); 
      }); 
     } 
    }, 

Демо: http://jsfiddle.net/mjjoyw94/1/