用于健康指数监控的控制器

问题描述

我需要将zamel代码转换为HTML代码。 zamel的控制器之一，允许监测健康指数。我有以下控制器：

此控制器的工作方式：

每个标准有3个状态，我们有六个标准：公司，IEEE，IEC，NEI，PTX和ABN。
现在每个标准有3个州：

1. OK状态 - 绿色。


2. 警示状态 - 黄色。


3. 危险状态 - 红色。

是正确的，那么整体健康指数是确定的，如果一个标准不确定，那么整体健康指数是警报或危险。

现在我需要一个控制器，这个旧的zamel控制器。
我目前正在使用highcharts作为我的图形，所以我试图找到一些控制器在highcharts的健康指数状态，但没有运气。

我开放的建议

1. 在Highcharts中查找控制器并进行修改。
   / li>
   
2. 查看其他可以帮助我的js库。


3. 从头开始构建自己的控制器， 。

为了缩小选项范围，我想使用Highcharts控制器完成这项任务。

解决方案

如果您想使某些自定义绘图与控制器类似，您可以使用Highcharts API中的renderer方法。您可以在这里找到Highcharts API的链接：

在这里您可以找到可帮助您解决问题的代码：

  var renderController = function（chart）{
 var chart = this，
 renderer = chart.renderer，
 seriesController = chart.options.seriesController，
 length = seriesController.data.length，
 plotWidth = chart.plotWidth，
 marginLeft = chart.marginLeft，
 width = chart.plotWidth / length，
 generalStatus ='ok' 
 color; 
 $（'。controler'）。remove（）; 
 Highcharts.each（seriesController.data，function（c，i）{
 if（c.status ==='ok'）{
 color ='＃119001'; 
} else if（c.status ==='alert'）{
 color ='yellow'; 
 generalStatus ='alert'; 
} else {
 color =' red'; 
 generalStatus ='danger'; 
} 
 renderer.circle（width * i +（width / 2），100，width / 2）.attr（{
 fill：color，
'stroke-width'：1，
 stroke：'blue'
}）。addClass（'controler'）add（）; 
 renderer.label （c.standard，width * i +（width / 2）-2,90）.attr（{
'text-anchor'：'middle'
}）addClass（'controler'）。 add（）; 
}）; 
 color = generalStatus ==='ok'？ '＃119001'：（generalStatus ==='alert'？'yellow'：'red'）; 
 renderer.circle（plotWidth / 2，300，width / 2）.attr（{
 fill：color，
'stroke-width'：1，
 stroke：'blue '
}）。addClass（'controler'）。add（）; 
 renderer.label（'General'，plotWidth / 2  -  2，290）.attr（{
'text-anchor'：'middle'
}）addClass（'controler'） 。加（）; 
}; 
  

在这里你可以找到一个示例如何工作：

I need to convert zamel code to HTML code. One of the controllers of zamel, allows monitoring of health index. I have the following controller:

The way this controller works:

It has 3 states for each standard, we have six standards: Corp,IEEE, IEC ,NEI , PTX and ABN.Now each standard has 3 states:

1. OK status- Green Color.
2. Alert status - Yellow Color.
3. Danger Status - Red color.

Now if all standards are ok,then the overall health index is ok, if one standard isn't ok then overall health index is Alert or Danger.

Now I need a controller which can replace this old zamel controller. I am currently using highcharts for my graphs so I tried to find some controllers in highcharts for health index status but without any luck.

I am open for suggestions for what to do, these are the options which stand before my eyes for current moment:

1. Find a controller in Highcharts and modify it.
2. Go for other js libraries which can help me in this situation.
3. Build my own controller from scratch, I will need an initial help in this option.

To narrow the options, lets say that I want to use a Highcharts controller for this mission, is it possible?

解决方案

You can use renderer method from Highcharts API, if you want to make some custom drawings similar to your controller. Here you can find link to Highcharts API: http://api.highcharts.com/highcharts/Renderer

Here you can find code that may help you with your problem:

  var renderController = function(chart) {
    var chart = this,
      renderer = chart.renderer,
      seriesController = chart.options.seriesController,
      length = seriesController.data.length,
      plotWidth = chart.plotWidth,
      marginLeft = chart.marginLeft,
      width = chart.plotWidth / length,
      generalStatus = 'ok',
      color;
    $('.controler').remove();
    Highcharts.each(seriesController.data, function(c, i) {
      if (c.status === 'ok') {
        color = '#119001';
      } else if (c.status === 'alert') {
        color = 'yellow';
        generalStatus = 'alert';
      } else {
        color = 'red';
        generalStatus = 'danger';
      }
      renderer.circle(width * i + (width / 2), 100, width / 2).attr({
        fill: color,
        'stroke-width': 1,
        stroke: 'blue'
      }).addClass('controler').add();
      renderer.label(c.standard, width * i + (width / 2) - 2, 90).attr({
        'text-anchor': 'middle'
      }).addClass('controler').add();
    });
    color = generalStatus === 'ok' ? '#119001' : (generalStatus === 'alert' ? 'yellow' : 'red');
    renderer.circle(plotWidth / 2, 300, width / 2).attr({
      fill: color,
      'stroke-width': 1,
      stroke: 'blue'
    }).addClass('controler').add();
    renderer.label('General', plotWidth / 2 - 2, 290).attr({
      'text-anchor': 'middle'
    }).addClass('controler').add();
  };

And here you can find an example how it can work: http://jsfiddle.net/pqw7pn2L/

这篇关于用于健康指数监控的控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！