Как установить перекрестие в высоких диаграммах в положение по умолчанию?

Question

Я использую highcharts для проекта с угловым2. В настоящее время я борется со следующим:

У меня есть синхронизированная диаграмма с одной осью х и несколькими осями по оси Y. Я показываю перекрестие и отображаю значения оси y в легенде. (короткий демонстрационный пример values in legend plugin)

Если я загружаю график, значение не отображается, так как перекрестье появляется после первой мыши. Я ищу, чтобы постоянно отображалось перекрестие, и если нет указателя мыши, он должен оставаться в положении по умолчанию (отображается самое текущее значение). Есть ли способ добиться такого поведения?

Я уже пробовал разные подходы. Проблема с сюжетными линиями заключается в том, что я не могу получить значения в легенде, чтобы отображать y-значения/пересечения сюжетной линии с линиями диаграмм.

Кроме того, я использую функции экспорта highcharts (offline), и мне интересно, есть ли способ экспортировать диаграмму с легендой И текущими значениями вместо начальных пустых, поскольку функция экспорта перезагружает диаграмму и поскольку перекрестье не установлено, значения легенды пусты в экспортированном файле.

Любая помощь очень ценится.

Answer 1

Вы можете комбинировать вещи, о которых вы упомянули, для достижения того, что вы хотите. Используя часть кода из плагина, вы можете установить начальные значения для легенды, установить plotLine при загрузке и удалить ее на mousemove.

рендеринг начальных значений:

function renderInitLegendValues() { 
var chart = this, 
    point = chart.series[0].data[2], 
    point2 = chart.series[1].data[2], 
    point3 = chart.series[2].data[2], 
    hoverPoints = chart.hoverPoints = [point, point2, point3], 
    legendOptions = chart.legend.options; 

Highcharts.each(hoverPoints, function(point) { 
    point.series.point = point; 
    point.setState('hover'); 
}); 

Highcharts.each(chart.legend.allItems, function(item) { 
    item.legendItem.attr({ 
    text: legendOptions.labelFormat ? 
     Highcharts.format(legendOptions.labelFormat, item) : legendOptions.labelFormatter.call(item) 
    }); 
}); 
chart.legend.render(); 
} 

обработка на участок линии (первая функция не позволит перекрестиям шкуры, если перемещение мыши за пределами области графика):

Highcharts.Pointer.prototype.reset = function() { 
    return undefined; 
}; 

function removeInitCrosshair(e) { 
    var normE = chart.pointer.normalize(e.originalEvent); 

    if (chart.isInsidePlot(normE.chartX - chart.plotLeft, normE.chartY - chart.plotTop)) { 
     chart.xAxis[0].removePlotLine('initial-crosshair'); 
     $(this).off('mousemove', removeInitCrosshair); 
    } 
} 

Пример: http://jsfiddle.net/y58w4u9j/1/

Что касается экспорта, вы можете определить линию сюжета динамически, установить состояние точек на зависании и значения легенды, непосредственно перед экспортом, чтобы изображение будут включать эти изменения.