时间戳

首页 > 解决方案 > 在 Highstock 中对齐多个轴的标题

highcharts - 在 Highstock 中对齐多个轴的标题

问题描述

我在 Highstock 图表中有 4 个轴：

				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 样式以使它们浮动以避免它们推动自己，但没有任何效果。

如何避免这个问题？

标签： highcharts

解决方案

您要实现的不是轴标题的默认行为。按照您的期望绘制标题的最简单方法是使用Highcharts SVG 渲染器制作自定义标题。

每个 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);
        }
      }
    }

}

chart.events.render 文档

演示： https ://jsfiddle.net/wchmiel/sxnyLhfb/

推荐阅读