13图表缩放

Highcharts 支持两种方式缩放，缩放（zoom）和平移（panning）,完全支持移动端手势。涉及图表缩放的相关属性在chart中

缩放

// 在 chart 项中的相关配置
$("#container").highcharts({
  chart: {
    zoomType: 'x'  // x,y,xy
  }
  // ... 省略代码
});

重置缩放比例按钮

有时需要，配置按钮的位置，文字，标题等

• chart.resetZoomButton按钮的相关配置
• lang.resetZoom按钮文字
• lang.resetZoomTtile按钮详情

$(function () {
    // 全局配置
    Highcharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
            resetZoom: '重置',
            resetZoomTitle: '重置缩放比例'
        }
    });
    $('#container').highcharts({
        chart: {
            zoomType: 'x',
            selectionMarkerFill: 'rgba(0,0,0, 0.2)',  // 选中区域配置
            resetZoomButton: {
                // 按钮定位
                position:{
                    align: 'right', // by default
                    verticalAlign: 'top', // by default
                    x: 0,
                    y: -30
                },
                // 按钮样式
                theme: {
                    fill: 'white',
                    stroke: 'silver',
                    r: 0,
                    states: {
                        hover: {
                            fill: '#41739D',
                            style: {
                                color: 'white'
                            }
                        }
                    }
                }
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        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]
        }]
    });
});

选中样式

1. chart.selectionMarkerFill

事件

1. 相关事件在char.events.selection

// 比如选中之后，需要的不是方法，而是在新的图表展示选中范围
$("#container").highcharts({
  chart: {
    events: {
      selection: function(e) {
        // 事件处理代码，可以通过 console.log(e) 查看更多详细信息
      }
    }
  }
});