`
zhengyang_003
  • 浏览: 12640 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

highcharts报表关于series点击文本或者符号的触发事件

阅读更多
1:Highcharts点击legend symbol切换并没改变图的可视状态,如何实现符号或文本都触发?
通过看源码我们发现,series事件只是针对标题项进行click事件处理,而图列legendSymbol并没有做click事件处理,
我们知道highcharts.js源码中是通过series中的标题事件来控制报表显示/隐藏效果。
源码中添加的有legendItem的click事件,但是legendSymbol图列没有click事件.
    .on('click', function(event) {
      var strLegendItemClick = 'legendItemClick',
      fnLegendItemClick = function() {
      item.setVisible();
    };
如果要实现图列和标题一样的事件,我们有2个方案,一般开发我们会考虑到改源码,但是如果其他地方使用的话就会导致类似的效果,但是可能它不需要这样的效果,怎么办?这时我们可以在我们的应用中加入如下代码信息即可:
var chart;
$(document).ready(function() {

    //...报表应用

    //在chart的每个serie上监听click
    $(chart.series).each(function(i){
        chart.series[i].legendSymbol.on('click',function(e){ //legend上click事件
        $(chart.series[i].legendItem.element).trigger('click'); // trigger click event on element
        });
    });

});
即:让图列的click事件触发采用标题的click触发事件

2:屏蔽series中图标和标题的触发改变图的可视状态?
屏蔽series图列和标题的click事件我们需要在我们的应用尾部添加如下代码实现.
var chart;
$(document).ready(function() {

    //...报表应用

  $(chart.series).each(function(i){ //屏蔽series标题click事件
      chart.series[i].legendItem.on('click',function(e){ //legendItem上click事件
          $(chart.series[i].legendItem.element).trigger(''); // trigger click event on element
      });
  });

  $(chart.series).each(function(i){ //屏蔽图列click事件
      chart.series[i].legendSymbol.on('click',function(e){ //legendItem上click事件
          $(chart.series[i].legendItem.element).trigger(''); // trigger click event on element
      });
  });

});
分享到:
评论

相关推荐

    Highcharts动态实现报表

    8. **交互功能**:Highcharts图表具有丰富的交互特性,如点击事件、拖拽重排、工具提示、缩放和平移等,可以通过配置选项来开启或定制。 通过上述知识点,开发者可以构建出功能丰富的动态报表,不仅能够展示静态...

    highcharts报表控件 jquery报表插件

    例如,可以通过设置`series.data`来指定每个数据点的值,使用`chart.options.legend`配置图例样式,或者用`plotOptions`调整特定图表类型的行为。此外,Highcharts还提供了丰富的主题和模块,如Drilldown模块用于...

    报表 HighCharts

    ### 报表HighCharts使用教程 #### 一、HighCharts简介 HighCharts是一款非常流行的JavaScript图表库,它基于SVG(可缩放矢量图形),在旧版本浏览器中使用VML(Vector Markup Language)作为后备方案。HighCharts...

    highcharts报表插件之chart参数配置API.chm

    这是自己整理highcharts报表插件的chart参数,因为里面的例子和图片比较多,所以就没有再博客里面加了,直接做成API文档,希望对大家有所帮助!

    highcharts制作报表本地导出图片

    以上代码中,当点击'export'按钮时,将会触发本地导出图片的过程。首先调用`Highcharts.exportChart`生成SVG字符串,然后创建一个新的Image对象加载这个SVG,当图片加载完成后,将其绘制到隐藏的canvas上,最后调用`...

    导出报表(highcharts)Demo

    可以导出highcharts报表,word、pdf都可以,简单的Demo

    highcharts图形报表使用说明

    - **交互式功能**:Highcharts支持点击事件、拖拽缩放、图例筛选等交互操作。 - **模块化**:除了基本图表,Highcharts还提供了多种模块,如3D图表、地图、热力图等,可以根据需要引入。 - **响应式设计**:...

    Highcharts实现图形报表

    4. **交互功能**:Highcharts图表是交互式的,用户可以点击图表元素查看详细信息,或者通过工具提示获取数据点的信息。 5. **自定义样式**:Highcharts允许你调整图表的颜色、形状、字体等样式,以满足个性化需求。 ...

    前端用Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    Highcharts提供了`plotOptions`下的`series`选项来处理点击事件。你可以为`series`设置`events`对象,并定义`click`函数来响应用户点击图表的行为。例如: ```javascript plotOptions: { series: { cursor: '...

    Highcharts 图形报表

    例如,你可以使用`chart.series[0].addPoint()`方法添加新的数据点,或者`chart.update()`方法整体更新图表配置。 总之,Highcharts是一个强大且灵活的图表库,能够满足各种数据可视化需求。无论是简单的线形图和...

    零基础highcharts生成报表-简单应用 .

    此外,Highcharts还支持丰富的交互功能,如点击事件、数据列缩放、导出图表等。例如,通过添加` exporting`模块,我们可以为图表提供下载和打印功能。还可以通过`events`属性监听图表的各类事件,实现自定义的交互...

    Highcharts水晶报表

    **Highcharts水晶报表**是一种基于JavaScript的开源图表库,它允许开发者轻松地在网页上创建交互式的、高质量的图表。这个库广泛应用于数据分析和可视化,尤其适用于web应用程序中,为用户提供直观的数据展示方式。...

    highcharts:组合图,生成可以点击的横坐标

    当然,你可以根据实际需求替换这个点击事件的处理逻辑,比如跳转到详情页面或者触发其他数据交互。 在提供的压缩包文件“简单的例子”中,可能包含了一个简单的示例代码,用于演示如何实现上述功能。你可以解压文件...

    highcharts 下钻多个series展示

    解决highcharts下钻的时候,不能展示多个series图例的问题。

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    当JSON数据返回到前端,JavaScript代码会解析这个JSON字符串,将数据点插入到Highcharts的`series.data`数组中,最后调用`chart.redraw()`或`chart.update()`方法来更新图表,展示新的曲线报表。 这个例子展示了...

    Highcharts js 图形报表

    - **交互性**: 图表支持鼠标悬停、点击事件,可显示数据提示框、缩放、平移等功能,提升用户体验。 - **响应式设计**: 自动适应各种屏幕尺寸,无论在桌面还是移动设备上都能良好展示。 - **自定义能力**: 提供...

    highcharts

    此外,Highcharts还提供了丰富的交互功能,如点击图表元素触发事件、数据列的动态加载和更新、缩放和平移等。这使得Highcharts不仅适用于静态展示,还能在数据变化时实时更新图表,提供动态的用户体验。 在提供的`...

    使用Highcharts快速开发报表

    Highcharts还内置了导出和打印功能,可以将图表保存为PNG、JPG、PDF或SVG格式,或者直接打印报表。 对于数据来源,Highcharts可以从JavaScript数组中获取,也可以从外部加载。例如,可以使用jQuery或其他工具获取...

Global site tag (gtag.js) - Google Analytics