Javascript 声明包含图形插件的多个对象的2d数组？

对于我的网页，我需要一个显示以下层次结构的图

• 攻击源（内部）
  • 登录滥用
  • dos
  • 间谍软件
  • 虫子
• 外部攻击者
  • 间谍活动
  • 社会攻击

当前对象数组看起来像（也是）

我想将此更改为执行以下操作：-（如上所示）

其中，我在2d数组中有一个父值和子值，所以上面的代码要转换为

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

我不确定我是否正确地使用对象初始化/分配了2d。如果有人能查看代码，并告诉我是否正确，我将不胜感激

更新

jsbin示例只是为了说明我对新代码的需求。例如，对于

“Label”：“virus”

目前是硬编码的，在实际代码中（我无法在jsbin上执行），我将从DB获取值

---

我不认为您试图使用的图表支持您想要做的事情。话虽如此，但要让它发挥作用，还是有一些技巧的：

$(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"
      }
    ]
  });
});  

数据

和

系列

数组的顺序很重要（不是完全重要，只是部分重要）。这里有一个例子来说明这一点。免责声明：我并不是说这将始终有效，因为它假设igniteUI将始终以相同的方式解析和显示数据

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

向量

属性返回颜色

一些备选方案：

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

---

jsbin示例中图表的初始化参数都乱七八糟-方括号和花括号不匹配等，使您很难弄清楚您希望它们是什么。@John NotNumber让我修改一下，等等，您是否可以至少发布“之前”数据，这些数据实际上映射到“之后”数据。否则，任何人都应该如何知道哪个属性在哪里结束？例如，在你假设的“目标”中，你有一个“

”标签“：“virus”

字符串

“virus”

甚至不在你的源数据中，那么你希望任何人如何理解它的来源呢？例如，您还有

“dos”

，但您有

“dos”

原件。他们应该互相映射吗？至少要保持一致。在“”中有

（可能缺少一个
”
），但在源代码中有
“iNISDE”
？再说一遍，它们是一样的吗？你以外的人怎么会知道呢？谢谢你的帮助。但是，对于我来说，顺序很重要。图形应显示层次化子对象（攻击类型），插入攻击源（内部）父信息。我已经更新了，但是我恐怕没有像你看到的那样保持数学距离，因为第二个环（dos）超出了它的父范围。有这样的问题可以解决吗？我更新了上面的代码和链接。关键在于让它以你想要的方式排列在值中。谢谢，我在添加这些数字时非常笨拙。我现在很自信，多亏了你的帮助，我可以做我需要的事情，让代码在生产中运行。我想触及的一个方面是关于我想要实现的东西的着色，但在graident外观中，我也分享了问题末尾的链接。遗憾的是，javascript不支持为这个插件显示这样的渐变。js是否有生成渐变颜色的本机代码/方法？感谢同一插件的渐变代码链接在很大程度上会受到igniteUI支持的限制，特别是因为它在画布上绘制图表。请参阅以上答案中的备选方案以获得更多控制。
$(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"
      }
    ]
  });
});