highstock不是24小时都有数据的情况下如何点击rangeSelector上的'一周'按钮后图表要合并一周的数据

var chart = Highcharts.stockChart('container', {
    chart: {
        marginRight: 50,
    },
    exporting: {
        enabled : true, // 不关闭导出按钮
        url : 'https://export.highcharts.com.cn'
    },
    credits: {//版权信息
        enable: false,
        href: '',
        text: ''
    },
    legend: {//图例
        enabled : true,//是否显示图例
        align : 'top',
    },
    navigation: {
        buttonOptions: {
            symbolStroke: 'red'
        }
    },
    navigator : {//导航器
        adaptToUpdatedData : true,
        enable : true,
        maskInside : true,
        opposite : false,
        outlineColor : '#ccc'
    },
    scrollbar : {
        height : 10,
        minWidth : 50,
    },
    rangeSelector : {//顶部按钮,输入框样式
        inputDateFormat : '%Y-%m-%d',
        inputEditDateFormat : '%Y-%m-%d',
        enabled : true,
        selected : 0,//表示以上定义button的index,从0开始
        buttons : [
        {
            type : 'day',
            count : 1,
            text : '1天',
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        },
        {
            type : 'week',
            count : 1,
            text : '1周',
            dataGrouping: {
                forced: true,
                units: [['week', [1]]]
            }
        }, 
            {
            type : 'all',
            text : '全部',
            dataGrouping: {
                forced: true,
                units: [['month', [1]]]
            }
        } ],
    },
    title: {
        text: '运行状态表'
    },
    xAxis: {
        type : 'datetime',
        min : 0,
        max : timeList[timeList.length/2],
        dateTimeLabelFormats: {//时间格式
            day : '%m-%d',
            week : '%m-%d',
            month : '%y-%m',
            year : '%Y'
        },
        labels : {
            align : 'left',
            style : {
                color : '#888'
            },
            fontSize : '12px',
            fontFamily : 'Verdana, sans-serif',
            rotation : '75',//调节倾斜角度偏移
            y : 20,
            x : -3,
            minPadding : 0.5,
            maxPadding : 0.0,
            tickInterval : 0,
            tickmarkPlacement : 'between'
        }
    },
    tooltip: {
        split: true,
        shared: true,
        followTouchMove: true,
        shape: 'callout',
        xDateFormat: '%Y-%m-%d',
        headerFormat: '<small class="headerFormat">{point.key}总时间: 
                       {point.stackTotal}小时<div></div></small><table>',
        pointFormat: '<tr><td style="color: {series.color}"><b>{series.name}: </b>                            
                     </td>' +
                     '<td style="text-align: right"><b>{point.y:.2f}小时</td> 
                      </tr>',
        footerFormat: '</table>',
    },
    plotOptions : {
        series : {
            showInLegend : true
        },
        column : {
            stacking : 'normal',
            dataLabels : {
                style : {
                    textShadow : '0 0 3px black'
                }
            }
        },
    },
    yAxis : [
        {
            labels : {
                align : 'center'
            },
            opposite: false
        },
        {
            labels : {
                align : 'right'
            },
            opposite: false
        },
        {
            labels : {
                align : 'right'
        },
        opposite: false
    },
    {
        labels : {
            align : 'right'
        },
        opposite: false
    } ],
    series : [
        {
            name : 'name1',
            color : '#B5B5B5',
            type : 'column',
            data : data1,
            yAxis : 1,
            dataGrouping : {
                units : groupingUnits
            }
        },
        {
            name : 'name2',
            color : '#eb3928',
            data : data2,
            type : 'column',
            yAxis : 1,
            dataGrouping : {
            units : groupingUnits
        }
    },
    {
        name : 'name3',
        color : '#ffc002',
        data : data3,
        type : 'column',
        yAxis : 1,
        dataGrouping : {
            units : groupingUnits
        }
    },
    {
        name : 'name4',
        color : '#08c60c ',
        data : data4,
        type : 'column',
        yAxis : 1,
        dataGrouping : {
            units : groupingUnits
        }
    } ]
});
var groupingUnits = [[
    'week',                        
     [1]            
  ], [
    'month',
     [1, 2, 3, 4, 6]
  ]];
                       		
Highcharts.setOptions({
	global : {
		useUTC : false//世界时间
	},
	lang: {
		rangeSelectorZoom : '范围:',
		shortMonths : [ '一月', '二月',
		'三月', '四月', '五月',
		'六月', '七月', '八月',
		'九月', '十月', '十一月',
		'十二月' ],
		weekdays : [ '星期日', '星期一',
		'星期二', '星期三',
		'星期四', '星期五', '星期六' ],
		printChart : '打印图表',
		downloadPNG : '下载JPEG 图片',
		downloadJPEG : '下载JPEG文档',
		downloadPDF : '下载PDF 图片',
		downloadSVG : '下载SVG 矢量图',
		contextButtonTitle : '下载图片'
	}
});

注意rangeSelector和series的参数设置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值