css - highcharts 实体仪表 : bigger tick marks

Question

我正在制作一个带有 Highcharts 的实心仪表。我正在尝试使刻度线足够长以跨越两个数据系列。目标是让一条白线穿过 10%、6%、2.9% 和 0% 处的彩色 strip 。请注意在 2.9% 时，刻度并没有完全通过(即使长度设置为 100)。

我尝试过 yAxis.tickLength 来延长刻度，但无济于事。我还尝试了 yAxis.tickPosition: 'inside'。那也解决不了。这是我的 JSFiddle。

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

感谢您的帮助。

Answer 1

如果您添加虚拟第二个 Pane 和 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>