点击highcharts下钻柱状图更改其他柱子图

最新推荐文章于 2023-12-28 22:27:53 发布

糟糕的沙漠

最新推荐文章于 2023-12-28 22:27:53 发布

阅读量454

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_42412237/article/details/109517087

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>