highcharts solid gauge：更大的刻度线

Question

我正在用高图制作一个坚固的仪表。我试图让得分长度足以跨越两个数据系列。目标是用白线切割10,6,2.9和0％的彩色条带。请注意，在2.9％时，刻度线不会一直完成（即使长度设置为100）。

我已经尝试过yAxis.tickLength来延长时间，但无济于事。我也试过了yAxis.tickPosition: 'inside'。这也解决不了。这是我的JSFiddle。

http://jsfiddle.net/ncernek/wy6bo63p/2/

感谢您的帮助。

Answer 1

如果添加虚拟第二个窗格和yAxis，则内部和外部都会有刻度 - 因为实际上会有2个刻度看起来像一个。

示例：http://jsfiddle.net/Lcz6juea/

如果我得到错误的刻度索引（超过序列），那么你可以使用这个代码而不为轴设置zIndex：http://jsfiddle.net/Lcz6juea/1/

$(function() {

  // Uncomment to style it like Apple Watch
  /*
  if (!Highcharts.theme) {
      Highcharts.setOptions({
          chart: {
              backgroundColor: 'black'
          },
          colors: ['#F62366', '#9DFF02', '#0CCDD6'],
          title: {
              style: {
                  color: 'silver'
              }
          },
          tooltip: {
              style: {
                  color: 'silver'
              }
          }
      });
  }
  // */

  Highcharts.setOptions({
    chart: {
      backgroundColor: 'white'
    },
    colors: ['#FE670A', '#0277a0', 'white']
  });

  Highcharts.chart('container', {

    chart: {
      type: 'solidgauge',
      marginTop: 50
    },

    title: {
      text: 'Discepant Reads',
      style: {
        fontSize: '24px'
      }
    },

    tooltip: {
      borderWidth: 0,
      backgroundColor: 'none',
      shadow: false,
      style: {
        fontSize: '16px'
      },
      pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold; text-align: center">{point.y}%</span>',
      positioner: function(labelWidth, labelHeight) {
        return {
          x: 200 - labelWidth / 2,
          y: 180
        };
      }
    },

    pane: [{
      startAngle: -140,
      endAngle: 140,
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }, { // Track for Exercise
        outerRadius: '87%',
        innerRadius: '63%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }, { // Track for Stand
        outerRadius: '62%',
        innerRadius: '38%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }]
    }, {
      startAngle: -140,
      endAngle: 140,
      size: '95%',
      background: []
    }],

    yAxis: [{
      reversed: true,
      min: 0,
      max: 10,
      lineWidth: 0,
      tickLength: 100,
      tickWidth: 4,
      tickColor: 'white',
      tickPosition: 'outside',
      minorTickLength: 0,
      tickPositions: [0, 2.9, 6, 10],
      zIndex: 4,
      labels: {
        distance: 30,
        enabled: true,
        x: 0,
        y: 0,
        format: '{value} %',
        style: {
          fontSize: 16
        }
      }
    }, {
      pane: 1,
      linkedTo: 0,

      reversed: true,
      min: 0,
      max: 10,
      lineWidth: 0,
      tickLength: 100,
      tickWidth: 4,
      tickColor: 'white',
      tickPosition: 'inside',
      minorTickLength: 0,
      tickPositions: [0, 2.9, 6, 10],
      zIndex: 4,
      labels: {
        enabled: false
      }
    }],

    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        dataLabels: {
          enabled: false
        },
        linecap: 'round',
        stickyTracking: false
      }
    },

    series: [{
      name: 'Your Score',
      borderColor: Highcharts.getOptions().colors[0],
      data: [{
        color: Highcharts.getOptions().colors[0],
        radius: '100%',
        innerRadius: '100%',
        y: 4
      }],
      dataLabels: {
        borderRadius: 0,
        backgroundColor: "#fff",
        borderWidth: 0,
        borderColor: "#FFF",
        style: {
          fontSize: "50px"
        },
        color: "grey",
        crop: true,
        formatter: function() {
          var s;
          s = '<span style="font-size: 50px;">' + this.point.y + '</span>';
          return s;
        },
        y: -30,
        zIndex: 90
      }
    }, {
      name: 'Department Average',
      borderColor: Highcharts.getOptions().colors[1],
      data: [{
        color: Highcharts.getOptions().colors[1],
        radius: '75%',
        innerRadius: '75%',
        y: 6
      }]
    }, {
      name: '',
      borderColor: Highcharts.getOptions().colors[2],
      data: [{
        color: Highcharts.getOptions().colors[2],
        radius: '50%',
        innerRadius: '50%',
        y: 50
      }]
    }]
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

Answer 2

使用JavaScript

Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (prev, x, y, tickLength, tickWidth, horiz, renderer) {
    return renderer.rect(x, y, 2, 80, 0)
             .attr({
               'stroke-width': 2,
               stroke: 'white',
               zIndex: 4,
               style: 'transform: rotateZ(45deg) translateY(-290px)'
             }).add();
}); 

你必须找出一种方法来覆盖每个刻度线，但它是可行的。

-

使用CSS

（几乎）纯CSS方法是针对精确的SVG路径并对其应用变换。这绝不是理想的方式，但确实提供了完成工作的方法。

.highcharts-axis path:nth-child(2) {
  transform: scale3d(1.6, 1, 1) rotateY(-59.7deg) translate(0, 25px);
  stroke-width: 2;
}

.highcharts-axis path:nth-child(3) {
  transform: scale3d(3.9, 1, 1) rotateY(-70deg) translate(0, 56px);
  stroke-width: 2;
}

您还必须调整zIndex的{​​{1}}属性，以便重绘的刻度位于其他路径之上：

yAxis