高图 - 如何在半圆内创建附加的图像标尺

Question

我需要这种类型的仪表图

如何创建上面的仪表图表

我有车速表测量仪工作，但它不符合需要。

在highchart 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/