Highchart - Как создать прикрепленный датчик изображения в полукруге

Question

Мне нужна диаграмма типа этого типа

Как мне создать приведенную выше контрольную таблицу

У меня работает датчик спидометра, но он не работаетне отвечает потребностям.

Есть ли способ в API верхней диаграммы использовать треугольник для датчика, а не спидометр?

Answer 1

К сожалению, по умолчанию это не поддерживается.Однако вы можете добиться этого, обернув метод Highcharts.seriesTypes.gauge.prototype.translate и изменив gauge путь элемента набора.Проверьте демо и код, указанный ниже.

Код оболочки:

  (function(H) {
    H.seriesTypes.gauge.prototype.translate = function() {
      var series = this,
        yAxis = series.yAxis,
        options = series.options,
        center = yAxis.center,
        pInt = H.pInt,
        merge = H.merge,
        pick = H.pick,
        isNumber = H.isNumber;

      series.generatePoints();

      series.points.forEach(function(point) {

        var dialOptions = merge(options.dial, point.dial),
          radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) /
          200,
          baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) /
          100,
          rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) /
          100,
          baseWidth = dialOptions.baseWidth || 3,
          arrowHeight = dialOptions.arrowHeight || 10,
          arrowWidth = dialOptions.arrowWidth || 5,
          topWidth = dialOptions.topWidth || 1,
          overshoot = options.overshoot,
          rotation = yAxis.startAngleRad +
          yAxis.translate(point.y, null, null, null, true);

        // Handle the wrap and overshoot options
        if (isNumber(overshoot)) {
          overshoot = overshoot / 180 * Math.PI;
          rotation = Math.max(
            yAxis.startAngleRad - overshoot,
            Math.min(yAxis.endAngleRad + overshoot, rotation)
          );

        } else if (options.wrap === false) {
          rotation = Math.max(
            yAxis.startAngleRad,
            Math.min(yAxis.endAngleRad, rotation)
          );
        }

        rotation = rotation * 180 / Math.PI;

        point.shapeType = 'path';
        point.shapeArgs = {
          d: dialOptions.path || [
            'M', -rearLength, -baseWidth / 2,
            'L',
            baseLength, -baseWidth / 2,
            baseLength, -arrowWidth,
            baseLength + arrowHeight, topWidth / 2,
            baseLength, arrowWidth,
            baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
            'z'
          ],
          translateX: center[0],
          translateY: center[1],
          rotation: rotation
        };

        // Positions for data label
        point.plotX = center[0];
        point.plotY = center[1];
      });
    }
  })(Highcharts);

Демо:

• https://jsfiddle.net/BlackLabel/07c3dkn4/1/