javascript - 使用哪个 Controller 进行健康指数监控

Question

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

这个 Controller 的工作方式:

每个标准有 3 个状态，我们有六个标准:Corp、IEEE、IEC、NEI、PTX 和 ABN。 现在每个标准有 3 个状态:

1. OK 状态 - 绿色。
2. 警报状态 - 黄色。
3. 危险状态 - 红色。

现在，如果所有标准都正常，则整体健康指数正常，如果一个标准不正常，则整体健康指数为警报或危险。

现在我需要一个 Controller 来代替这个旧的 zamel Controller 。 我目前正在为我的图表使用 highcharts，所以我试图在 highcharts 中找到一些 Controller 来了解健康指数状态，但没有任何运气。

我愿意听取关于该做什么的建议，这些是目前摆在我眼前的选项:

1. 在 Highcharts 中找到一个 Controller 并对其进行修改。
2. 寻求其他可以在这种情况下帮助我的 js 库。
3. 从头开始构建我自己的 Controller ，在此选项中我需要初步帮助。

为了缩小选择范围，假设我想为这个任务使用 Highcharts Controller ，这可能吗？

Answer 1

如果您想制作一些类似于您的 Controller 的自定义绘图，您可以使用 Highcharts API 中的渲染器方法。在这里您可以找到 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/