玩转Highcharts图表库系列（四） 散点图和曲线图的混合显示

Highcharts提供了多种类型的图表形式，在其中文网上可以查看到各种示例。下面要分享的案例是同时显示当日数据和历史参考数据，但是把历史参考数据显示成散点图的形式，当日数据显示为曲线。

图截的日期不是很好，当时只显示了历史参考数据的散点图，因为当日没有数据进数据库，也就获取不到数据，不过从下方的图例可以看出来。

// 散列图和曲线图的混合图
        function chartsMixed(renderTo) {
            return {
                chart: {
                    zoomType: 'x',
                    renderTo: renderTo,
                    shadow: true //外框阴影
                    //marginRight: 10
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    labels: {
                        align: 'right',
                        style: {
                            rotation: 0,
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        },
                        formatter: function () {
                            if (this.value > 86400 || this.value < 0)
                                return '';
                            else {
                                var hour = Math.floor(this.value / 3600) > 9 ? Math.floor(this.value / 3600) : '0' + Math.floor(this.value / 3600);
                                var minute = Math.floor((this.value % 3600) / 60) > 9 ? Math.floor((this.value % 3600) / 60) : '0' + Math.floor((this.value % 3600) / 60);
                                var second = (this.value % 60) > 9 ? (this.value % 60) : '0' + (this.value % 60);
                                return hour + ':' + minute + ':' + second;
                            }
                        },
                        step: 1 //步长，可以跳格
                    },
                    min: 0, // 最小是0
                    max: 86400, //最大是24*3600
                    tickLength: 0, //主刻度的长度
                    tickWidth: 0, // 主刻度的宽度
                    startOnTick: true,
                    endOnTick: true,
                    showFirstLabel: false,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'KW'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1//,
                       // color: '#808080'
                    }],
                    min: 0
                },
                tooltip: {
                    crosshairs: [true, true],
                    //shared: true, // 不能共享，否则this.series为null
                    formatter: function () {
                        var hour = Math.floor(this.x / 3600) > 9 ? Math.floor(this.x / 3600) : '0' + Math.floor(this.x / 3600);
                        var minute = Math.floor((this.x % 3600) / 60) > 9 ? Math.floor((this.x % 3600) / 60) : '0' + Math.floor((this.x % 3600) / 60);
                        var second = (this.x % 60) > 9 ? (this.x % 60) : '0' + (this.x % 60);

                        return '<b>' + this.series.name + '</b><br/>' + hour + ':' + minute + ':' + second + '<br/>' + Highcharts.numberFormat(this.y, 2);
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    spline: {
                        //color: '#808080',
                        allowPointSelect: true,
                        cursor: 'pointer', //鼠标移到图表上时鼠标的样式 
                        enableMouseTracking: true, //鼠标移到图表上时是否显示提示框 
                        events: {//监听点的鼠标事件  
                            click: function () {
                                var x = event.point.x;
                                var hour = Math.floor(x / 3600) > 9 ? Math.floor(x / 3600) : '0' + Math.floor(x / 3600);
                                var minute = Math.floor((x % 3600) / 60) > 9 ? Math.floor((x % 3600) / 60) : '0' + Math.floor((x % 3600) / 60);
                                var second = (x % 60) > 9 ? (x % 60) : '0' + (x % 60);
                                var time = hour + ':' + minute + ':' + second;
                                ShowMaxSubValues(time);
                            }
                        },
                        lineWidth: 2,
                        marker: {
                            enabled: true, //是否显示点  
                            radius: 2,
                            states: {
                                hover: {
                                    lineWidth:3
                                }
                            },
                            select: {
                                enabled: false//控制鼠标选中点时候的状态  
                            }
                            //symbol: 'square'
                        },
                        states: {
                            hover: {
                                enabled: true, //鼠标放上去线的状态控制
                                lineWidth: 3
                                //lineColor: '#808080'
                            }
                        },
                        visible: true
                        //stickyTracking:true//跟踪
                    },
                    scatter: {
                        cursor: 'pointer', //鼠标移到图表上时鼠标的样式 
                        marker: {
                            radius: 1.5,
                            states: {
                                hover: {
                                    enabled: true//,
                                    //lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    }
                },
                series: []

            };
        }

持续更新中。。。

玩转Highcharts图表库系列（一） 显示多条曲线
玩转Highcharts图表库系列（二） 沿X轴设置不同的背景色分辨带
玩转Highcharts图表库系列（三） 给曲线加上点击事件
玩转Highcharts图表库系列（四） 散点图和曲线图的混合显示