Question

我正尝试将highcharts图例移到图表容器之外，当我浏览选项时获得了此链接https://forum.highcharts.com/highstock-usage/legend-placement-outside-of-chart-area-t28582/，可以在回调中创建图例，或使用其他任何选项将图例移至外面有传说吗？

Answer 1

您还可以使用很少的CSS来完成这些参数legend.x和legend.y-API Doc

CSS

body{
  background-color:#ddd;
  padding:100px;
}
.highcharts-container, .highcharts-container > svg{
  overflow:visible !important;
}

JavaScript

...

legend:{
    verticalAlign:'top',
    x:-300,
    y:-100
},
...

Fiddle

Answer 2

可以在加载图表之后使用chart.events.load事件函数来创建图例。它应该没有问题，但是这里有一个小样机，展示了如何实现它：

Highcharts.chart('container', {
	chart: {
  	events: {
    	load() {
      	var seriesOneBtn = document.getElementById('s1')
        var seriesTwoBtn = document.getElementById('s2')
      	var chart = this
        var seriesOne = chart.series[0]
        var seriesTwo = chart.series[1]
        
        seriesOneBtn.onclick = function() {
        	seriesOne[seriesOne.visible ? 'hide' : 'show']()
        }
        seriesTwoBtn.onclick = function() {
        	seriesTwo[seriesTwo.visible ? 'hide' : 'show']()
        }
        
      }
    }
  },
	legend: { 
  	enabled: false
  },
	series: [{
  	data: [1,2,3]
  }, {
  	data: [3,2,1]
  }]
})

#container {
  width: 100%;
  height: 400px;
  border: 1px solid tomato;
}

#legend {
  width: 150px;
  margin: 0 auto;
  border: 1px solid tomato
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<div id="legend">
  <button id="s1">Series 1</button>
  <button id="s2">Series 2</button>
</div>

API参考：https://api.highcharts.com/highcharts/chart.events.load

亲切的问候！

将海图图例移到图表容器之外

2 个答案: