具有互换div的高级图表
具有互换div的高级图表
提问于 2018-04-04 18:46:39
我有一个高图表列图和下面的内容来交换背景色，如果我点击一个列作为ex:第一列，下面的背景颜色和文本应该是交换的，再次当我们再次单击第二列时，我的div的背景颜色和文本应该被交换。类似地，所有的div都应该被交换，点击每个column.If，就可以用也很好的图表。提前谢谢。
https://jsfiddle.net/hk7pm73a/2/
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.layout{
border:1px solid;
padding:100px;
}
.green{
background:green;
}
.red{
background:red;
}
.yellow{
background:yellow;
}
</style>
</head>
<body>
<div id="container" class="col-md-12" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="layout green col-md-4">green</div><div class="layout red col-md-4">red</div><div class="layout yellow col-md-4">yellow</div>javascript
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'sample charts for both horizontal and vertical line'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
gridLineWidth: 1,
minPadding: 2,
maxPadding: 2,
maxZoom: 6 ,
categories: ['Jan', 'Feb', 'Apr', 'May', 'Jun',
'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return '$'+this.value;
}
},
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
// name: '',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}]
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-05 05:35:07
您可以连接到该系列中点的单击事件。
var colors=['.green', '.red', '.yellow','.green', '.red', '.yellow'];
point: {
events: {
click: function (event) {
$('.layout').css('display', 'none');
$(colors[event.point.index]).css('display', 'block');
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49658282
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号