我有一个高图列图和下面的内容用于交换背景颜色，如果我点击一列ex：first列，div下面的backgroundcolor和文本应该交换，再次当我们再次点击第二列时我的div的backgroundcolor和text应该是swap。类似地，所有的div都应该在每一列上交换掉。如果它可以用图表也可以。 提前谢谢。
https://jsfiddle.net/hk7pm73a/2/
<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>
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]
}]
});
答案 0 :(得分：0)
您可以挂钩系列中点的点击事件。
unamePattern = "^(?=.*[a-z]).{2}[a-zA-Z0-9\\-_]*$";
isValidFormSubmitted = null;
Form = this.formBuilder.group({
FooNumber: ['', [Validators.required, Validators.pattern(this.unamePattern)]]
});
constructor(private formBuilder: FormBuilder) {
}
onFormSubmit() {
this.isValidFormSubmitted = false;
if (this.Form.invalid) {
return;
}
this.isValidFormSubmitted = true;
this.Form.reset();
}
get FooNumber() {
return this.Form.get('FooNumber');
}