Highcharts —— 更新图表

最新推荐文章于 2024-09-10 23:26:16 发布

星星也会数人类嘛

最新推荐文章于 2024-09-10 23:26:16 发布

阅读量974

点赞数

分类专栏： Highcharts 文章标签： Highcharts 甘特图更新图表

本文链接：https://blog.csdn.net/qq_42627162/article/details/107785736

版权

Highcharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

近期做一个分析型项目，用到图表比较多，发现一个特别好用的开源图表Highcharts，用来做甘特图很棒，文档加实例都很全面，贴一个官网。https://www.highcharts.com.cn/

图表初始化后，ajax动态查询，需要刷新图表，用到的方法：
在这里插入图片描述
我的甘特图配置：

Highcharts.setOptions({
        lang:{
            contextButtonTitle:"图表导出菜单",
            decimalPoint:".",
            downloadJPEG:"导出JPEG图片",
            downloadPDF:"导出PDF文件",
            downloadPNG:"导出PNG文件",
            downloadSVG:"导出SVG文件",
            drillUpText:"返回 {series.name}",
            loading:"加载中",
            months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            noData:"没有数据",
            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
            printChart:"打印图表",
            resetZoom:"恢复缩放",
            resetZoomTitle:"恢复图表",
            shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
            thousandsSep:",",
            weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
        },
        credits:{
            enabled: false // 版权信息
        },
        chart: {
            type: 'xrange'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                week: '%Y/%m/%d'
            }
        },

        tooltip: {
            dateTimeLabelFormats: {
                day: '%Y/%m/%d'
            }
        }
    })


var charts = Highcharts.chart('deviceStatusGanttChart', {
        title: {
            text: ''
        },
        yAxis: {
            title: {
                text: ''
            },
            categories: device.deviceNumber,
            reversed: true
        },
        series: [{
            name: '设备运行状态',
            pointWidth: 20,
            data: device.seriesData2,
            dataLabels: {
                enabled: true
            }
        },{
            name: '设备报警',
            pointWidth: 20,
            data: device.seriesData1,
            dataLabels: {
                enabled: true
            }
        }],
        legend: {
            layout :'vertical',
            backgroudColor: '#FFFFFF',
            floating: true,
            align: 'left',
            berticalAlign: 'top'
        }
    });

放一个我的ajax实例：

$.ajax({
    url: '/device/findAllDevice'
    async: false,
    success: function (data) {
        if (data.length>0) {
            device = {
                data: "",
                deviceNumber: [],
                deviceLog: "",
                seriesData1: [],
                seriesData2: []
            };
            // 这个是我的自定义方法，不重要
            deviceData(data,$("#beginTime").val(),$("#endTime").val());
            
            // 更新代码在这里！ 只有一个yAxis要放yAxis[0]，不然update无效
            charts.yAxis[0].update({
                categories: device.deviceNumber
            })
            // 我的甘特图每个y对应两条曲线，所以series有两个，一般也是一个
            charts.series[0].update({
                data: device.seriesData2 // 放入自己的data数据，是数组
            })
            charts.series[1].update({
                data: device.seriesData1
            })

        }else{
            Feng.error("未找到相关数据，请核对后重试!");
        }

    },
    error: function () {
        Feng.error("查询数据失败，请刷新重试!");
    }
})