javascript - 包含图形插件多个对象的二维数组声明？

Question

我使用 igDoughnutChart对于我的网页，我想要一个显示以下层次结构的图表

• 攻击源(内部)
  • 登录滥用
  • 任务
  • spy 软件
  • 蠕虫
• 外部攻击者
  • spy
  • 社交攻击

当前对象数组看起来像(也是 demo )

var data = [
              { "attacksource": 43, "attacktype": 60, "AT":"DoS","Label": "iNISDE" },
              { "attacksource": 29, "attacktype": 40, "AT":"login abuse","Label": "outside" } 
];

我想将其更改为执行以下操作:-(也在上面显示)

我在二维数组中有父值和子值，所以上面的代码是转换为

  var data = 
        [
            [{"attacksource": 43,"Label":"Inside"}],
            [
                 {"attacktype": 13,"Label":"dos"},
                 {"attacktype": 13,"Label":"virus"}...
            ]
        ];

我不确定我是否使用 对象 正确地初始化/分配了 2d。如果有人可以查看代码，我将不胜感激，并让我知道我这样做是否正确。

更新

jsbin 示例只是为了说明我对新代码的要求。例如 "Label":"virus" 目前是硬编码的，在实际代码中(我不能在 jsbin 上这样做)是我将从数据库中获取值。

VISUAL EXAMPLE

Answer 1

我认为您尝试使用的图表不支持您想要执行的操作。话虽这么说，但要让它发挥作用，还是有些技巧:

$(function () {

  var data = [
    { "label": "Inside", "attacks": 8 },
    { "label": "Outside", "attacks": 6 },

    // Inside 
    { "label": "Dos", vector: "Inside", "dummyValue": 6 },
    { "label": "siem", detect: "Dos", "detectValue": 3 },
    { "label": "user", detect: "Dos", "detectValue": 3 },

    { "label": "Worm", vector: "Inside", "dummyValue": 2 },
    { "label": "siem", detect: "Worm", "detectValue": 1 },
    { "label": "user", detect: "Worm", "detectValue": 1 },

    // Outside
    { "label": "Spying", vector: "Outside", "dummyValue": 3 },
    { "label": "siem", detect: "Spying", "detectValue": 1.5 },
    { "label": "user", detect: "Spying", "detectValue": 1.5 },

    { "label": "Social", vector: "Outside", "dummyValue": 3},
    { "label": "siem", detect: "Social", "detectValue": 1.5 },
    { "label": "user", detect: "Social", "detectValue": 1.5 },
  ];

  $("#chart").igDoughnutChart({
    width: "100%",
    height: "550px",
    innerExtent: 6,
    series:
    [
      {
        name: "Attack Type",
        labelMemberPath: "label",
        valueMemberPath: "attacks",
        dataSource: data,
        labelsPosition: "center"
      },
      {
        name: "Attack Vector",
        labelMemberPath: "label",
        valueMemberPath: "dummyValue",
        dataSource: data,
        labelsPosition: "center"
      },
      {
        name: "detect Vector",
        labelMemberPath: "label",
        valueMemberPath: "detectValue",
        dataSource: data,
        labelsPosition: "center"
      }
    ]
  });
});  

data 和series 数组的顺序很重要(不是全部，只是部分)。这是一个jsFiddle这证明了这一点。免责声明:我并不是说这将始终有效，因为它假设 igniteUI 将始终以相同的方式解析和显示数据。

此外，我不熟悉该库，但我敢打赌有一种方法可以自定义图表每个部分的颜色。如果是这样，您可以将颜色设为一个函数，该函数返回基于 vector 属性的颜色。

一些备选方案:

• > Highcharts
• > D3 - 这将是我的首选方法。浏览图库，这里有一些适用的示例。