zoukankan      html  css  js  c++  java
  • highchart添加事件

     获取标题,当点击时弹窗
    $(document).ready(function(){
    var options = {
    chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    renderTo:'userage-chart',
    type:'column',
    800
    },
    credits :{
    text:''
    },
    title: {
    text: '年龄分布'
    },
    xAxis: {
    categories: ['15岁以下','16-22岁','23-33岁','33-45岁','46岁以上']
    },
    yAxis: {
    labels: {
    formatter: function() {
    return this.value;
    }
    },
    min: 0,
    title: {
    text: ''
    }
    },
    exporting: {
    enabled: false
    },
    plotOptions: {
    series: {
    dataLabels: {
    enabled: true
    }
    }
    },
    tooltip: {
    /* pointFormat: '{series.name}: <b>{point.y}</b><br/>' */
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    '<td style="padding:0"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
    },
    series: [{
    name: '今年5月年龄分布',
    data: [1257, 6781,8475, 7866, 3690]
    },{
    name: '去年5月年龄分布',
    data: [257, 781,475, 866, 690]
    }]
    };

    var chart = new Highcharts.Chart(options);     
    var text = options.title.text;
    $("text").click(function(){
    alert("这是标题");
    })

    $(".huanbi").click(function(){
    options.series[0].name = '今年5月年龄分布';
    options.series[1].name = '今年4月年龄分布';
    options.series[0].data = [1257, 6781,8475, 7866, 3690];
    options.series[1].data = [2157, 1781,2475, 1866, 2690];
    chart = new Highcharts.Chart(options);                                         //点击按钮后改变表格数值,再赋值给chart,即更新表格
    })

  • 相关阅读:
    PostgreSQL数据库((数据库类型介绍)
    postgreSQL(SQL语音操作数据库)
    postgreSQL数据库连接注意事项
    数据库
    Excel函数文本变E+显示怎么办
    无糖可乐不好喝
    通过 命令查看 linux桌面使用的是wayland 还是 X11
    Intel CPU的后缀含义
    互联网缩略语
    linux 下为windows交叉编译 ffmpeg库
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/3774613.html
Copyright © 2011-2022 走看看