Question

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

攻击源（内部）
- 登录滥用
- DOS
- 间谍软件
- 蜗杆
外部攻击者
- 间谍
- 社交攻击

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

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

我想更改此内容以执行以下操作： - （也在上面显示）

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

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

我不确定我是否正确使用对象初始化/分配了2d。我很感激如果有人可以查看代码，请告诉我我是否正确行事。

更新

jsbin示例只是为了说明我对新代码的要求。例如，"Label":"virus"当前是硬编码的，在实际代码中（我在jsbin上无法做到）是我将从DB获取值。

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 - 这是我的首选方法。浏览图库，这里有一些例子。

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

1 个答案: