时间戳

首页 > 解决方案 > 如何在 highchart 列单击时显示弹出窗口

javascript - 如何在 highchart 列单击时显示弹出窗口

问题描述

我必须在高图中的每一列点击显示表格。我能够显示警报，但我想要模式弹出而不是警报。

plotOptions: {
    column: {
      stacking: 'normal',
      point: {
        events: {
          click: (e) => {
            $('#myModal').show();
            return `<div id="myModal" class="modal">
                      <div class="modal-content">
                        <div class="modal-header">
                    
                          <div class="modal-header-div">
                            <div class="tableTitle">Rule Violations Details</div>
                    
                          </div>
                        </div>
                        <div class="modal-body">
                          <h1>Show table</h1>
                        </div>
                        <div class="modal-footer">
                    
                        </div>
                      </div>
                    </div>`
          },
        }
      }

标签： javascriptjqueryhighcharts

解决方案

从 'click' 事件函数回调返回一个字符串不会做任何事情。您需要手动管理元素：

    plotOptions: {
        column: {
            stacking: 'normal',
            point: {
                events: {
                    click: (e) => {
                        var popupContent = `...`;

                        $('#popup').append(popupContent);
                    },
                }
            }
        }
    }

现场演示：http: //jsfiddle.net/BlackLabel/wued0cyh/

API 参考： https ://api.highcharts.com/highcharts/plotOptions.column.events.click

推荐阅读