在Highstock

时间：2018-10-29 14:51:18

标签： highcharts

我正在尝试在Highstock图表上为Y轴着色，我尝试更改plotBackgroundColor，但它会更改整个绘图区域。

2张图像超过2000个单词：

enter image description here

在左边有我当前的结果，它改变了整个绘图区域的背景色，因此不容易看到图表的结束位置和下一个图表的开始位置，在右边是预期的结果，每个轴之间用背景颜色和灰色边框。

这是我的代码：

var p0 = [
  [1540166400000,122.85],
  [1540170000000,122.33],
  [1540173600000,120.96],
  [1540177200000,120.77],
  [1540180800000,120.84],
  [1540184400000,120.61],
  [1540188000000,120.83],
  [1540191600000,121.04],
  [1540195200000,120.67],
  [1540198800000,121.05],
  [1540202400000,122.29],
  [1540206000000,122.45],
  [1540209600000,123.13],
  [1540213200000,123.74],
  [1540216800000,124.07],
  [1540224000000,123.28],
  [1540227600000,122.59],
  [1540231200000,122.98],
  [1540234800000,123.51],
  [1540238400000,123.38],
  [1540242000000,123.45],
  [1540245600000,123.15],
  [1540249200000,123.72],
  [1540252800000,123.65],
  [1540256400000,123.65],
  [1540260000000,123.28],
  [1540263600000,122.56],
  [1540267200000,122.41],
  [1540270800000,122.23],
  [1540274400000,122.22],
  [1540278000000,122.4],
  [1540281600000,121.57],
  [1540285200000,121.69],
  [1540288800000,121.98]];
var p1 = [
  [1540166400000,127.27],
  [1540170000000,126.74],
  [1540173600000,125.46],
  [1540177200000,125.49],
  [1540180800000,125.71],
  [1540184400000,125.49],
  [1540188000000,125.57],
  [1540191600000,126.02],
  [1540195200000,125.62],
  [1540198800000,125.88],
  [1540202400000,126.49],
  [1540206000000,127.11],
  [1540209600000,127.97],
  [1540213200000,128.84],
  [1540216800000,128.66],
  [1540224000000,127.63],
  [1540227600000,126.98],
  [1540231200000,127.63],
  [1540234800000,127.77],
  [1540238400000,127.21],
  [1540242000000,127.24],
  [1540245600000,126.87],
  [1540249200000,126.99],
  [1540252800000,127.04],
  [1540256400000,127.47],
  [1540260000000,126.91],
  [1540263600000,126.3],
  [1540267200000,126.36],
  [1540270800000,126.07],
  [1540274400000,126.09],
  [1540278000000,126.18],
  [1540281600000,125.54],
  [1540285200000,125.7],
  [1540288800000,126.06]];

chart = new Highcharts.StockChart({
chart: {
	renderTo: "container",
	backgroundColor:'#EBEBEB',
	plotBackgroundColor:'#FFFFFF',
  plotBorderColor: '#999999',
  plotBorderWidth: 2
},
title: {
	text: "Coloring axis",
},
legend: {
	enabled: false
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		minorTicks: 1,
		height: "46%",
		top: "4%"
	},
	{
		minorTicks: 1,
		height: "46%",
		top: "54%"
	}
],
series: [
	{
		name: "Val1 1",
		data: p0,
		yAxis: 0,
	},
	{
		name: "Presión 2",
		data: p1,
		yAxis: 1,
	},
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>

3 个答案:

答案 0 :(得分：1)

可以通过使用第三个yAxis来实现您所追求的目标，就像这样：

{
  height: "4%",
  top: "50%",
  labels: {
    enabled: false
  },
  min: 0,
  max: 1,
  minorGridLineWidth: 0,
  gridLineWidth: 0,
  plotBands: [{
    color: '#EBEBEB',
    borderColor:'#999999',
    borderWidth: 2,
    from: 0.05,
    to: 0.95,
  }
}


var p0 = [
  [1540166400000,122.85],
  [1540170000000,122.33],
  [1540173600000,120.96],
  [1540177200000,120.77],
  [1540180800000,120.84],
  [1540184400000,120.61],
  [1540188000000,120.83],
  [1540191600000,121.04],
  [1540195200000,120.67],
  [1540198800000,121.05],
  [1540202400000,122.29],
  [1540206000000,122.45],
  [1540209600000,123.13],
  [1540213200000,123.74],
  [1540216800000,124.07],
  [1540224000000,123.28],
  [1540227600000,122.59],
  [1540231200000,122.98],
  [1540234800000,123.51],
  [1540238400000,123.38],
  [1540242000000,123.45],
  [1540245600000,123.15],
  [1540249200000,123.72],
  [1540252800000,123.65],
  [1540256400000,123.65],
  [1540260000000,123.28],
  [1540263600000,122.56],
  [1540267200000,122.41],
  [1540270800000,122.23],
  [1540274400000,122.22],
  [1540278000000,122.4],
  [1540281600000,121.57],
  [1540285200000,121.69],
  [1540288800000,121.98]];
var p1 = [
  [1540166400000,127.27],
  [1540170000000,126.74],
  [1540173600000,125.46],
  [1540177200000,125.49],
  [1540180800000,125.71],
  [1540184400000,125.49],
  [1540188000000,125.57],
  [1540191600000,126.02],
  [1540195200000,125.62],
  [1540198800000,125.88],
  [1540202400000,126.49],
  [1540206000000,127.11],
  [1540209600000,127.97],
  [1540213200000,128.84],
  [1540216800000,128.66],
  [1540224000000,127.63],
  [1540227600000,126.98],
  [1540231200000,127.63],
  [1540234800000,127.77],
  [1540238400000,127.21],
  [1540242000000,127.24],
  [1540245600000,126.87],
  [1540249200000,126.99],
  [1540252800000,127.04],
  [1540256400000,127.47],
  [1540260000000,126.91],
  [1540263600000,126.3],
  [1540267200000,126.36],
  [1540270800000,126.07],
  [1540274400000,126.09],
  [1540278000000,126.18],
  [1540281600000,125.54],
  [1540285200000,125.7],
  [1540288800000,126.06]];

chart = new Highcharts.StockChart({
chart: {
	renderTo: "container",
	backgroundColor:'#EBEBEB',
	plotBackgroundColor:'#FFFFFF',
  plotBorderColor: '#999999',
  plotBorderWidth: 2
},
title: {
	text: "Coloring axis",
},
legend: {
	enabled: false
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		minorTicks: 1,
		height: "46%",
		top: "4%",
		plotLines: [
		]
	},
	{
		minorTicks: 1,
		height: "46%",
		top: "54%",
		plotLines: [
		]
	},
  {
  	height: "4%",
    top: "50%",
    labels: {
    	enabled: false
    },
    min: 0,
    max: 1,
    minorGridLineWidth: 0,
    gridLineWidth: 0,
    plotBands: [{
    	color: '#EBEBEB',
      borderColor:'#999999',
      borderWidth: 2,
      
      from: 0.05,
      to: 0.95,
    }]
  }
],
series: [
	{
		name: "Val1 1",
		data: p0,
		yAxis: 0,
	},
	{
		name: "Presión 2",
		data: p1,
		yAxis: 1,
	},
]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>

JSFiddle示例： https://jsfiddle.net/ewolden/q826ze9v/8/

达到目标的“正确”方法是遵循highcharts的同步图表示例：https://www.highcharts.com/demo/synchronized-charts。这比较复杂，但是可以为您提供更多的自定义功能，并且从长期来看可能会更容易实现。

答案 1 :(得分：0)

我最终使用highcharts SVGRenderer进行了此操作，在z-index：-1的每个轴上绘制了白色矩形以将其绘制在背景上。

我希望这对某人有帮助！

var p0 = [
  [1540166400000,122.85],
  [1540170000000,122.33],
  [1540173600000,120.96],
  [1540177200000,120.77],
  [1540180800000,120.84],
  [1540184400000,120.61],
  [1540188000000,120.83],
  [1540191600000,121.04],
  [1540195200000,120.67],
  [1540198800000,121.05],
  [1540202400000,122.29],
  [1540206000000,122.45],
  [1540209600000,123.13],
  [1540213200000,123.74],
  [1540216800000,124.07],
  [1540224000000,123.28],
  [1540227600000,122.59],
  [1540231200000,122.98],
  [1540234800000,123.51],
  [1540238400000,123.38],
  [1540242000000,123.45],
  [1540245600000,123.15],
  [1540249200000,123.72],
  [1540252800000,123.65],
  [1540256400000,123.65],
  [1540260000000,123.28],
  [1540263600000,122.56],
  [1540267200000,122.41],
  [1540270800000,122.23],
  [1540274400000,122.22],
  [1540278000000,122.4],
  [1540281600000,121.57],
  [1540285200000,121.69],
  [1540288800000,121.98]];
var p1 = [
  [1540166400000,127.27],
  [1540170000000,126.74],
  [1540173600000,125.46],
  [1540177200000,125.49],
  [1540180800000,125.71],
  [1540184400000,125.49],
  [1540188000000,125.57],
  [1540191600000,126.02],
  [1540195200000,125.62],
  [1540198800000,125.88],
  [1540202400000,126.49],
  [1540206000000,127.11],
  [1540209600000,127.97],
  [1540213200000,128.84],
  [1540216800000,128.66],
  [1540224000000,127.63],
  [1540227600000,126.98],
  [1540231200000,127.63],
  [1540234800000,127.77],
  [1540238400000,127.21],
  [1540242000000,127.24],
  [1540245600000,126.87],
  [1540249200000,126.99],
  [1540252800000,127.04],
  [1540256400000,127.47],
  [1540260000000,126.91],
  [1540263600000,126.3],
  [1540267200000,126.36],
  [1540270800000,126.07],
  [1540274400000,126.09],
  [1540278000000,126.18],
  [1540281600000,125.54],
  [1540285200000,125.7],
  [1540288800000,126.06]];

chart = new Highcharts.StockChart({
chart: {
	renderTo: "container",
	backgroundColor:'#EBEBEB'
},
title: {
	text: "Coloring axis",
},
legend: {
	enabled: false
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		minorTicks: 1,
		height: "46%",
		top: "4%"
	},
	{
		minorTicks: 1,
		height: "46%",
		top: "54%"
	}
],
series: [
	{
		name: "Val1 1",
		data: p0,
		yAxis: 0,
	},
	{
		name: "Presión 2",
		data: p1,
		yAxis: 1,
	},
]
}, function (chart) { // on complete
  var yaxisColl = chart.yAxis;
  for(f=0;f<yaxisColl.length;f++){
    axis = yaxisColl[f];
    chart.renderer.rect(10, axis.top, axis.width, axis.height, 0, 2)
				.attr({
					'stroke-width': 2,
					stroke: '#999999',
					fill: '#FFFFFF',
					zIndex: -1
				})
				.add();
  }
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>

答案 2 :(得分：0)

您也可以在每个plotBands上使用yAxis：

yAxis: [
    {
        minorTicks: 1,
        height: "46%",
        top: "4%",
    plotBands: [{
        from:-1000,
      to:1000,
      color:'rgb(255,255,255)'
    }]
    },
    {
        minorTicks: 1,
        height: "46%",
        top: "54%",
    plotBands: [{
        from:-1000,
      to:1000,
      color:'rgb(255,255,255)'
    }]
    }
]

示例：http://jsfiddle.net/jlbriggs/k2syL51r/

相关问题
最新问题