javascript - 用于健康指数监控的 Controller

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


该控制器的工作方式：

每个标准有3个状态，我们有6个标准：Corp，IEEE，IEC，NEI，PTX和ABN。
现在每个标准都有3种状态：


OK状态-绿色。
警报状态-黄色。
危险状态-红色。


现在，如果所有标准都合格，那么总体健康指标就可以，如果一个标准不合格，则总体健康指标为“警报”或“危险”。

现在，我需要一个可以替代此旧zamel控制器的控制器。
我目前在图表中使用highcharts，因此我尝试在highcharts中找到一些控制器以获取健康指标状态，但没有任何运气。

我愿意提出建议，这些是当下摆在我眼前的选择：


在Highcharts中找到一个控制器并进行修改。
寻找其他可以在这种情况下为我提供帮助的js库。
从头开始构建自己的控制器，在此选项中，我需要初步帮助。


为了缩小选择范围，可以说我要为此任务使用Highcharts控制器，这可能吗？

最佳答案

如果要制作一些类似于控制器的自定义工程图，则可以使用Highcharts API中的renderer方法。在这里，您可以找到指向Highcharts API的链接：
http://api.highcharts.com/highcharts/Renderer

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

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

在这里，您可以找到一个示例它如何工作的：http://jsfiddle.net/pqw7pn2L/

关于javascript - 用于健康指数监控的 Controller ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39317791/