声明2d包含多个图形插件对象的数组？ [英] Declaration 2d array containing multiple objects for graph plugin?

问题描述

我为我的网页使用 igDoughnutChart ，我想要一张图表显示以下层次：

• 攻击源（内部）
  
  
  
  • 登录滥用 li>
    
  • dos
  
  
  • 间谍软件
  
  
  • 蠕虫
  
  
  • 外部攻击者
    
    
    
    • 间谍
    
    
    • 社交攻击
      
    / li>
    
  
  
  

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

    var data = [
   {attacksource：43， 攻击类型：60，AT：DoS，标签：iNISDE}，
   {attacksource：29，攻击类型：40，AT标签：外部} 
  ]; 
    

  我想将其更改为以下操作： - （同时显示）

  
  
  

  在2d数组中，我有一个父类和子类值，所以上面的代码将转换为
  
  <$ p $ 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}，
 
 //里面
 {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 ：社交，detectValue ：1.5}，
 {label：user，detect：Social，detectValue：1.5}，
]; 
 
 $（＃chart）。igDoughnutChart（{
 width：100％，
 height：550px，
 innerExtent：6，
系列：
 [
 {
名称：攻击类型，
 labelMemberPath：label，
 valueMemberPath：攻击，
 dataSource ：data，
 labelsPosition：center
}，
 {
 name：Attack Vector，
 labelMemberPath：label，
 valueMemberPath： dummyValue，
 dataSource：data，
 labelsPosition：center
}，
 {
名称：detect Vector，
 labelMemberPath：标签，
 valueMemberPath：detectValue，
 dataSource：data，
 labelsPosition：center
} 
] 
}）; 
}）; 
  

数据的顺序和 series 数组很重要（不完全，只是部分）。这是一个 jsFiddle ，演示了这一点。免责声明：我并不是说这总是会起作用，因为它大大地假设igniteUI总是会以相同的方式解析和显示数据。

另外，米不熟悉图书馆，但我敢打赌有一种方法来定制图表的每个部分的颜色。如果是这样，你可以将颜色设置为一个返回基于向量属性的颜色的函数。

：

• Highcharts


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

I using igDoughnutChart for my web-page, I want a graph which shows the following hierarchy

• source of attack (inside)
  • login abuse
  • dos
  • spyware
  • worm
• outside attackers
  • spying
  • social attacks

The current object array looks like (also demo)

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

I want to change this to do following:- (also shown above)

Where I have a parent and child values in 2d array so above code is to transform as

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

I'm not sure If I have initialized / assigned 2d using objects correctly.I appreciate If someone can look at the code, and let me know if I'm doing this right.

UPDATE

The jsbin example is just something to illustrate my requirements for the new code. For e.g "Label":"virus" is currently hardcoded, in real code (which I cannot do on jsbin) is I will get the values from DB.

VISUAL EXAMPLE

解决方案

I don't think the chart you are trying to use support what you want to do. That being said there is somewhat of a hack to make it work:

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

The order of the data and series arrays matter (not completely, just partially). Here is a jsFiddle that demonstrates this. Disclaimer: I'm not saying this will always work, as it makes the big assumption that igniteUI will always parse and display the data in the same way.

Also I'm not familiar with the library but I would bet there is a way to customize the colors of each section of the chart. If so you could just make the color a function that returns a color based on the vector property.

Some alternatives:

• Highcharts
• D3 - this would be my preferred approach. Browse the gallery, there a few examples that apply here.

这篇关于声明2d包含多个图形插件对象的数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！