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/

Highchart-如何在半圆内创建附加的图像规

1 个答案: