【工作记录0019】Hightcharts 修改缩放(x/y/xy轴放大或缩小)按钮的文字

主要用到了Hightchart 的全局配置:

        //Highcharts 全局配置
        Highcharts.setOptions({
            // 所有语言文字相关配置都设置在 lang 里
            lang: {
                resetZoom: '重置',//若图标设置了缩放功能,当鼠标选中数据列的连续点或者区域时会出现缩放按钮,此选项设置了按钮上的文字
                resetZoomTitle: '重置缩放比例',//此选项为鼠标悬浮在按钮上后显示的提示文字
            }
        });

效果图:

补充说明:

1.默认缩放按钮属性如下;

resetZoom: ‘Reset zoom

resetZoomTitle: 'Reset zoom level 1:1'

2.设置图标选中缩放功能:

$('#id').highcharts({
                chart: {
                    zoomType: 'x'//放大方式,x表示横向放大,y表示纵向放大,xy表示双轴放大
                }
});


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 提供了一些交互组件,包括缩放工具(toolbox)。通过在 toolbox 中配置 dataZoom 组件可以实现缩放功能。 下面是一个简单的例子,展示了如何在 y 轴上使用缩放工具放大缩小: ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [{ type: 'inside', start: 0, end: 100 }, { start: 0, end: 100, handleIcon: 'M10.7,11.3c0,0.4,0.1,0.7,0.2,1c0.3,0.7,1,1.2,1.8,1.2c1.1,0,2-0.9,2-2c0-0.8-0.4-1.5-1.2-1.8c-0.3-0.1-0.6-0.2-1-0.2c-0.8,0-1.5,0.4-1.8,1.2c-0.1,0.3-0.2,0.6-0.2,1z m-2.7,0c0-0.4-0.1-0.7-0.2-1c-0.3-0.7-1-1.2-1.8-1.2c-1.1,0-2,0.9-2,2c0,0.8,0.4,1.5,1.2,1.8c0.3,0.1,0.6,0.2,1,0.2c0.8,0,1.5-0.4,1.8-1.2c0.1-0.3,0.2-0.6,0.2-1z m-2.7,0c0-0.4-0.1-0.7-0.2-1c-0.3-0.7-1-1.2-1.8-1.2c-1.1,0-2,0.9-2,2c0,0.8,0.4,1.5,1.2,1.8c0.3,0.1,0.6,0.2,1,0.2c0.8,0,1.5-0.4,1.8-1.2c0.1-0.3,0.2-0.6,0.2-1z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; ``` 在该示例中,我们在 toolbox 中配置了 dataZoom 组件,并将 yAxisIndex 设置为 'none',这样 dataZoom 只会对 x 轴进行缩放。然后,我们在 option 中添加了一个 dataZoom 组件,通过设置 start 和 end 属性来限制缩放的范围。最后,我们将 series 的类型设置为 'line',并提供了一些示例数据。 缩放工具的使用方法还有很多,以上仅是一个简单的示例。如果你需要更详细的信息,请参阅 ECharts 文档中的 dataZoom 组件文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值