highcharts图，需求：
- 图1为下钻图，并且点击图1，图2[,图3,…]会发生变化
重新绘制highcharts图参考链接：HighChart学习-更新数据data Series与重绘
思路
使用柱图的点击事件获取点击了哪个柱子[即x轴的值]，然后根据x值处理数据，更改图形
获取点击的X轴值
console.log(this.data[0].name)
获取chart1图的值console.log(chart1.series.data)
- 方法1：使用setData()
plotOptions: {
series: {
events:{
click:function(event){
data=[
{"name":"sx","y":15},{"name":"wh","y":6}
,{"name":"ss","y":3},{"name":"km","y":3}
,{"name":"qb","y":2},{"name":"sk","y":2}
]
chart1.series[0].setData(data,true);
}
}
}
}
注意此处为chart1；
- 方法2：去掉原来的值后，再添加新的值
// 循环去除，不然会追加
while (chart1.series.length > 0) {
chart1.series[0].remove(true);
}
chart1.addSeries({
id:1,
name: "Fail line",
data: [{"name":"yl","y":15},{"name":"wh","y":6},{"name":"km","y":3},{"name":"qb","y":3},{"name":"sk","y":3}]
}, false);
// 可设置第二个[给x添第二根柱子]
// chart1.addSeries({
// id:2,
// name: "wang-er-ma",
// data: [5]
// }, false);
chart1.redraw();
问题
方法1：
1.图2是下钻，并且x轴数量与data数量相等时出现:图2的柱子可以点,值为图2本来对应的值
2.图2是下钻，并且x轴数量与data数量不等时出现问题:柱子点不了,x轴的值可点,并出现按钮印记
方法2：
图2是下钻，柱子点不了,x轴的值可点,并出现按钮印记
以下代码并未实现根据x值，更改图形
放图
点击前：
点击后：
代码
- 图2为一个带下钻的柱状图，去掉 drilldown 后为正常柱状图
- 图1为一个带下钻和点击事件的柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Highcharts</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js">
</script><script type="text/javascript" src="js/drilldown.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="my_container" style="width:1300px; height:300px;"></div>
<div id="my_container1" style="width:1300px; height:300px;"></div>
<script>
$(function() {
var chart;
var chart1;
$(document).ready(function () {
// 图1配置
chart = new Highcharts.Chart({
chart: {
renderTo: 'my_container'
,type: 'column'
,style:{
fontFamily: 'Tahoma'
,fontWeight:'bold'
}
}
,title: { text: '图1标题' }
,xAxis: { type: 'category' }
,yAxis: { title: {text: 'COUNTS'} }
,credits: { enabled: false }
,legend: { enabled: false }
,tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>'
,pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> Q\'ty<br/>'
}
,series: [{
name: 'Fail',
colorByPoint: true,
data: [
{"name":"aa","y":2,"drilldown":"aa_drill"}
,{"name":"bb","y":2,"drilldown":"bb_drill"}
,{"name":"cc","y":1,"drilldown":"cc_drill"}
,{"name":"dd","y":1,"drilldown":"dd_drill"}
,{"name":"ee","y":1,"drilldown":"ee_drill"}
]
}]
,plotOptions: {
series: {
borderWidth: 0 // 设置图标边框
,dataLabels: { // 设置数字标签，柱图上显示数字
enabled: true
,format: '{point.y}'
}
,cursor:'pointer'
,events:{
click:function(event){
console.log(this.data[0].name);
console.log(chart1.series)
// 1. setData
// data=[{"name":"sx","y":15},{"name":"wh","y":6},{"name":"ss","y":3},{"name":"km","y":3},{"name":"qb","y":2},{"name":"sk","y":2}]
// chart1.series[0].setData(data,true);
// 2. 删除后，再添加 chart1.series[0].remove(true); chart1.addSeries({ }) chart1.redraw();
while (chart1.series.length > 0) {
chart1.series[0].remove(true);
}
chart1.addSeries({
id:1,
name: "Fail line",
data: [{"name":"4FR3","y":15},{"name":"7FR2","y":6},{"name":"5FR2","y":3},{"name":"4FR4","y":3},{"name":"3FR3","y":2}]
}, false);
// chart1.addSeries({
// id:2,
// name: "wang-er-ma",
// data: [5]
// }, false);
chart1.redraw();
}
}
}
}
,exporting: { enabled:false }
,drilldown: {
drillUpButton: {
position: {
y: - 40,
x: - 30
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
}
},
series: [
{
name:'aa'
,id:'aa_drill'
,data:[['2020-08-11',2]]
}
,{
name:'bb'
,id:'bb_drill'
,data:[['2020-08-11',2]]
}
,{
name:'cc'
,id:'cc_drill'
,data:[['2020-08-11',1]]
}
,{
name:'dd'
,id:'dd_drill'
,data:[['2020-08-11',1]]
}
,{
name:'ee'
,id:'ee_drill'
,data:[['2020-08-11',1]]
}
]
}
});
// 图2配置
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'my_container1',
type: 'column', // 类型：column 柱状图 line折线图 bar条形图 spline曲线图
style:{
fontFamily: 'Tahoma',
fontWeight:'bold'
}
}
,title: { text: '图2标题' }
,subtitle: { text: '副标题' }
,xAxis: { type: 'category' }
,yAxis: { title: {text: 'Counts'} }
,credits: { enabled: false } // 右下角官网链接,默认true
,legend: { enabled: false } // 图例，默认为true
,tooltip: { // 提示框
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> Q\'ty<br/>'
}
,series: [ // 数据列
{
name: 'Fail',
colorByPoint: true,
data: [
{"name":"a","y":2,"drilldown":"a_drill"}
,{"name":"b","y":2,"drilldown":"b_drill"}
,{"name":"c","y":1,"drilldown":"c_drill"}
,{"name":"d","y":1,"drilldown":"d_drill"}
,{"name":"e","y":1,"drilldown":"e_drill"}
]
},
]
,plotOptions: { // 数据列通用配置
series: {
borderWidth: 0,// 设置图标边框,默认为0
dataLabels: { // 设置为true，数据列自动显示列的信息
enabled: true,
format: '{point.y}' // 数据标签显示内容格式化
}
}
}
,exporting: { enabled:false } // 导出打印功能
,drilldown: { // 下钻
drillUpButton: { // 按钮设置
position: {
y: - 40,
x: - 30
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
}
},
series: [
{
name:'a'
,id:'a_drill'
,data:[['2020-08-11',2],['2020-08-12',3]]
}
,{
name:'b'
,id:'b_drill'
,data:[['2020-08-11',2]]
}
,{
name:'c'
,id:'c_drill'
,data:[['2020-08-11',1]]
}
,{
name:'d'
,id:'d_drill'
,data:[['2020-08-11',1]]
}
,{
name:'e'
,id:'e_drill'
,data:[['2020-08-11',1]]
}
]
}
});
});
});
</script>
</body>
</html>
2676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
