如何打开多个图表内模态一次在组织点击highcharts在Angular ?

e5nqia27  于 2022-11-24  发布在  Highcharts
关注(0)|答案(2)|浏览(157)

在组织结构图中,我尝试在单击任何节点时同时打开多个图表,但在尝试打开它时出现错误。
下面是我所指的代码。请帮助我如何才能打开多个highchart在同一时间(不同类型,即线,条形highchart)。任何帮助将不胜感激。提前感谢。
https://stackblitz.com/edit/highcharts-angular-line-n2zhsq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

a7qyws3x

a7qyws3x1#

问题似乎是,在jsfiddle中,有创建新Highcharts图表的代码,但您的Angular组件中似乎还没有该代码。您似乎还有更多的工作要做!

events: {
        click: function() {
          const popup = document.getElementById('popup');
          const popupContent = document.getElementById('popupContent');

          popup.style.display = 'block';

          Highcharts.chart(popupContent, {
            chart: {
              width: 200
            },
            series: [{
              type: 'organization',
              data: nestedChartData[this.id]
            }]
          });

          this.series.chart.update({
            tooltip: {
              enabled: false
            }
          });
        }
      }
jbose2ul

jbose2ul2#

图表类型与数据有关,我将数据Department1更改为API中的线型数据,series.line.data,现在您可以打开线型图表。

const nestedChartData = {
  Department1: [1, 2, 4, 5],
  Department2: [
    [0, 1],
    [1, 2],
    [2, 8]
  ],
  Department3: [{
    x: 1,
    y: 9,
    name: "Point2",
    color: "#00FF00"
  }, {
    x: 1,
    y: 6,
    name: "Point1",
    color: "#FF00FF"
  }],
};

演示:https://stackblitz.com/edit/highcharts-angular-line-rqg4hy
编辑
我准备了一个简化的演示,在point event click中创建新的HTML元素。
演示:https://jsfiddle.net/BlackLabel/fud5q19a/

相关问题