Показать сюжетные линии в высоких диаграммах со скрытой осью?

Есть ли способ показать сюжетные линии, даже если связанная ось имеет visible: false? Кажется, что скрытие оси также скрывает сюжетные линии.Показать сюжетные линии в высоких диаграммах со скрытой осью?

Подробнее ...

Я рисую диаграмму дня, как это:

Я просто хочу, чтобы добавить вертикальную линию в определенное время, линия «Текущая» время и т.д.

Если я сделать это с помощью сюжетной линии, то ось показывает слишком:

Я определенно не хочу, чтобы ось показывалась.

Теперь мой план состоит в том, чтобы нарисовать мою собственную линию на графике, используя render.rect или render.path. Есть ли другой вариант?

источник

2017-01-06 Glen Little

Правильно - сюжетные линии являются дочерним элементом оси и поэтому будут скрыты, когда ось будет скрыта. Если вы можете настроить скрипт или пример кода и немного больше информации о том, чего вы пытаетесь достичь, я уверен, что мы сможем найти способ его решения. – jlbriggs

Это слишком плохо. Я посмотрю, смогу ли я что-то сделать в ближайшие дни. –

Что вы ожидаете от этого? Строки сюжета находятся в определенных точках вдоль этой оси. Если оси нет, где должны быть построены линии? Как бы знать диаграмму? Я думаю, если вы подробно объясните, почему вы хотите этого поведения, мы быстро обнаружим, что есть лучший способ получить то, что вам нужно. – jlbriggs

Я нашел довольно тривиальное решение ... просто скрыть его с помощью CSS:

.highcharts-xaxis { 
    display: none; 
}

и в ЯШ:

xAxis: { 
    type: 'datetime', 
    labels:{ 
     enabled: false 
    } 
}

источник

2017-01-07 17:58:29

Да, это путь.Или, если вы хотите сделать все это в javascript или для пользователей со старыми версиями Highcharts, вы можете добавить 'lineWidth: 0' в свой' xAxis'. – jlbriggs

Вы можете extend Highcharts путем обертывания метода, ответственного за перерисовку оси.

Highcharts.wrap(Highcharts.Axis.prototype, 'redraw', function(p) { 
p.call(this); 
console.log(this); 
var axis = this, 
    each = Highcharts.each, 
    options = this.options; 
// move plot lines and bands 
if (!axis._addedPlotLB) { // only first time 
    each((options.plotLines || []), function(plotLineOptions) { 
    axis.addPlotBandOrLine(plotLineOptions); 
    }); 
    axis._addedPlotLB = true; 
} 

each(this.plotLinesAndBands, function(plotLine) { 
    plotLine.render(); 
}); 
});

пример: http://jsfiddle.net/ncs81btt/

Раствор выше, не очень элегантно, хотя. Гораздо лучшие способы сделать это - использовать Renderer или скрыть отдельные элементы оси (метки, тики и т. Д.).

В зависимости от того, что вам нужно от функциональности линий линии, с помощью средства визуализации требуется выполнить некоторые вычисления.

var customPlotLines = [{ 
    value: 5, 
    color: 'red', 
    width: 3 
    }, { 
    value: 10, 
    color: 'yellow', 
    width: 3 
    }] 

function renderPlotLines() { 
var axis = this.xAxis[0], 
    top = axis.chart.plotTop, 
    bottom = top + axis.chart.plotHeight, 
    path = [ 
     'M', null, top, 
     'L', null, bottom 
    ]; 

if (!this.customPlotLines) { 
    this.customPlotLines = customPlotLines.map(plotLine => { 
    return this.renderer.path([]).add(); 
    }); 
} 

this.customPlotLines.forEach((plotLine, i) => { 
    var opt = customPlotLines[i]; 
    path[4] = path[1] = axis.toPixels(opt.value); 
    plotLine.attr({ 
    d: path.join(' '), 
    'stroke-width': opt.width, 
    stroke: opt.color 
    }); 
}); 
}

Подключиться к событию load/redraw, чтобы элементы изменили размер.

chart: { 
    zoomType: 'xy', 
    events: { 
    load: renderPlotLines, 
    redraw: renderPlotLines 
    } 
},

пример: http://jsfiddle.net/ncs81btt/1/

источник

2017-01-06 22:41:18 morganfree

Показать сюжетные линии в высоких диаграммах со скрытой осью?

ответ

Смежные вопросы