zoukankan      html  css  js  c++  java
  • highcharts line鼠标hover效果

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
    
            plotOptions: {
                series: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            },
    
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        });
    });

    demo:http://jsfiddle.net/UyF9u/2/

    var columns = [];
    $.each([49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],function(i,v){
        columns.push({
            y: v,
            marker:{
                states:{
                    hover:{
                        fillColor:"#ff0000",
                        backgroundColor:"#ff0000",
                        color: '#ff6600'
                    }
                }
            }
        });
    });
    
    $(function () {
            $('#container').highcharts({
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: 'Average Monthly Temperature and Rainfall in Tokyo'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                tooltip: {
                    shared: true
                },
                xAxis: false,
                yAxis: false,         
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    x: 120,
                    verticalAlign: 'top',
                    y: 100,
                    floating: true,
                    backgroundColor: '#FFFFFF'
                },
                series: [{
                    name: 'Rainfall',
                    color: '#E5E5E5',
                    type: 'column',
                    data: columns,
                    tooltip: {
                        valueSuffix: ' mm'
                    }   
                }, {
                    name: 'Temperature',
                    color: '#9B59B5',
                    type: 'spline',
                    data: columns,
                    tooltip: {
                        valueSuffix: '°C'
                    }
                }]
            });
        });
        

    demo:http://jsfiddle.net/TheSharpieOne/DMcQ3/

  • 相关阅读:
    RDD的基本命令
    python 数据类型
    RDD基础
    sql优化
    python文件操作
    Python之xlsx文件与csv文件相互转换
    ValueError: Some of types cannot be determined by the first 100 rows, please try again with sampling
    python
    python操作dataFrame
    python 列表,元祖,字典
  • 原文地址:https://www.cnblogs.com/sanfense/p/highcharts.html
Copyright © 2011-2022 走看看