Question

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

此控制器的工作方式：

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

确定状态 - 绿色。
提醒状态 - 黄色。
危险状况 - 红色。

现在如果所有标准都没问题，那么整体健康指数就可以了，如果一个标准不合适，那么整体健康指数就是警报或危险。

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

我愿意接受有关做什么的建议，这些是我眼前的选择：

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

要缩小选项范围，我们可以说我想使用Highcharts控制器执行此任务，是否可以？

Answer 1

如果要制作与控制器类似的自定义绘图，可以使用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/

哪个控制器用于健康指数监控

1 个答案: