Выровнять названия по нескольким осям в Highstock

Question

У меня есть 4 оси на графике Highstock:

				var p0 = [
				[1538341200000,110.91],
				[1538427600000,126.01],
				[1538514000000,129.54],
				[1538600400000,125.54]];
				var p1 = [
				[1538341200000,113.14],
				[1538427600000,129.48],
				[1538514000000,132.28],
				[1538600400000,129.53],];
				var t0 = [
				[1538341200000,29.25],
				[1538427600000,37.28],
				[1538514000000,36.1],
				[1538600400000,36.17],];
				var t1 = [
				[1538341200000,29.67],
				[1538427600000,37.53],
				[1538514000000,37.26],
				[1538600400000,37.9],];
        
Highcharts.stockChart('container', {
chart: {
	renderTo: "container"
},
title: {
	text: "Sample test",
	align: "center",
	y: 14
},
legend: {
	enabled: true,
	align: "center",
	verticalAlign: "top",
	y: 40
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		left: "-100%",
		height: "18%",
		top: "7%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "32%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "57%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "82%"
	}
],
series: [
	{
		name: "Pressure 3",
		data: p0,
    yAxis: 0
	},
	{
		name: "Pressure 4",
		data: p1,
    yAxis: 1
	},
	{
		name: "Temperature 3",
		data: t0,
    yAxis: 2
	},
	{
		name: "Temperature 4",
		data: t1,
    yAxis: 3
	}
]
});

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>

Теперь я хочу добавить заголовки к каждой оси в верхнем левом углу, например:

				var p0 = [
				[1538341200000,110.91],
				[1538427600000,126.01],
				[1538514000000,129.54],
				[1538600400000,125.54]];
				var p1 = [
				[1538341200000,113.14],
				[1538427600000,129.48],
				[1538514000000,132.28],
				[1538600400000,129.53],];
				var t0 = [
				[1538341200000,29.25],
				[1538427600000,37.28],
				[1538514000000,36.1],
				[1538600400000,36.17],];
				var t1 = [
				[1538341200000,29.67],
				[1538427600000,37.53],
				[1538514000000,37.26],
				[1538600400000,37.9],];
        
Highcharts.stockChart('container', {
chart: {
	renderTo: "container"
},
title: {
	text: "Sample test",
	align: "center",
	y: 14
},
legend: {
	enabled: true,
	align: "center",
	verticalAlign: "top",
	y: 40
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		title: {
			text: "Pressure 3",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "7%"
	},
	{
		title: {
			text: "Pressure 4",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "32%"
	},
	{
		title: {
			text: "Temperature 3",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "57%"
	},
	{
		title: {
			text: "Temperature 4",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "82%"
	}
],
series: [
	{
		name: "Pressure 3",
		data: p0,
    yAxis: 0
	},
	{
		name: "Pressure 4",
		data: p1,
    yAxis: 1
	},
	{
		name: "Temperature 3",
		data: t0,
    yAxis: 2
	},
	{
		name: "Temperature 4",
		data: t1,
    yAxis: 3
	}
]
});

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 400px; height: 600px;"></div>

Как видно, каждый заголовок разбивает следующий, добавляя немного поля и «толкая» их вправо.

Это ожидаемый результат:

Я пробовал многие свойства highstock и стили CSS, чтобы они плаваличтобы они не давили сами, но ничего не работает.

Как избежать этой проблемы?

Answer 1

То, что вы пытаетесь достичь, не является поведением по умолчанию для заголовка оси.Самый простой способ построения титров, как вы ожидаете, - это создание пользовательских титров с использованием Highcharts SVG renderer .

. Каждый yAxis имеет свойства top и left, которые мы можем использовать для построения пользовательских титров.в правильных положениях.Обратите внимание, что навигатор - это просто дополнительная серия, поэтому массив yAxis будет иметь на один элемент больше, чем вы определили.Названия, созданные рендерером: Highcharts.SVGElement .Каждый раз, когда карта будет отображаться, вам нужно уничтожить старых и обработать их снова (в новых позициях):

var titlesColl = [],
    titles = [
      "Pressure 3",
      "Pressure 4",
      "Temperature 3",
      "Temperature 4"
    ];

  chart: {
    events: {
      render: function() {
        var chart = this,
          yaxisColl = chart.yAxis,
          offsetY = -4,
          axis,
          title,
          i;

        if (titlesColl.length) {
          titlesColl.forEach(function(elem) {
            elem.destroy();
          });

          titlesColl.length = 0;
        }

        for (i = 0; i < yaxisColl.length - 1; i++) {
          axis = yaxisColl[i];
          title = chart.renderer
            .text(titles[i], axis.left, axis.top + offsetY)
            .css({
              'font-size': '10px'
            })
            .add();

          titlesColl.push(title);
        }
      }
    }

}

графика.events.render документация

Демо: https://jsfiddle.net/wchmiel/sxnyLhfb/