Which controller to use for Health Index Monitoring

问题

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:

OK status- Green Color.
Alert status - Yellow Color.
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:

Find a controller in Highcharts and modify it.
Go for other js libraries which can help me in this situation.
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?

回答1:

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/

来源：https://stackoverflow.com/questions/39317791/which-controller-to-use-for-health-index-monitoring

标签

javascript

html

css

Highcharts