Question

我正在使用HighChart的Angular Gauge，想知道是否有可能有不等的间隔。目前，Y轴上的不等间隔会影响仪表中每个绘图带的大小。如何在Y轴上具有相等的绘图带尺寸和不等间隔。

以下是间隔-0-86,86-88,88-90,90-96和96-100的示例。

到目前为止我已经尝试过了 -

$(function() {

  $('#container').highcharts({
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Percentage %'
    },

    pane: {
      center: ['50%', '85%'],
      size: '130%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: '#EEE',
        innerRadius: '80%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    exporting: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    // the value axis
    yAxis: [{
      min: 0,
      max: 100,
      minorTickInterval: 'auto',
      minorTickWidth: 0,
      minorTickLength: 10,
      minorTickPosition: 'outside',
      minorTickColor: '#666',
      tickPixelInterval: 50,
      tickInterval: 6,
      tickWidth: 2,
      tickPosition: 'outside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
        step: 1,
        distance: 20,
        rotation: 'auto',
        style: {
          fontSize: '15px'
        }
      },
      title: {
        text: ''
      },
      plotBands: [{
        from: 0,
        to: 86,
        color: '#bf0000',
        innerRadius: '60%',
        outerRadius: '100%'
      }, {
        from: 86,
        to: 88,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#fcfe00'
      }, {
        from: 88,
        to: 90,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#00ae50'
      }, {
        from: 90,
        to: 96,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#2f74b4'
      }, {
        from: 96,
        to: 100,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#7131a0'
      }]
    }],
    plotOptions: {
      gauge: {
        dial: {
          backgroundColor: "silver",
          baseLength: "80%",
          baseWidth: 4,
          borderColor: "grey",
          borderWidth: 1,
          radius: "90%",
          rearLength: "0",
          topWidth: 1
        },
        pivot: {
          backgroundColor: "silver",
          borderColor: "grey",
          borderWidth: 1,
          radius: 5
        },
        dataLabels: {
          y: 3,
          style: {
            fontSize: "15px"
          },
          borderWidth: 0,
          useHTML: false
        }
      }
    },
    series: [{
      name: 'Speed',
      data: [90],
      tooltip: {
        valueSuffix: ''
      }
    }]

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

感谢任何帮助！

Answer 1

好吧，根据你的要求看起来你想要达到类似的目的..

其中min和max应相应更新。

<强>解决方案 -

据我所知，您希望将红色中的所有值设置为低于86％。正确？那你为什么不改变图表的最小值呢？我的意思是在将值传递给图表时相应地操纵您的输入数据并将相应的标签传递给它。

希望这会对您有所帮助：）

Answer 2

嗯，High Chart没有提供直接方法来显示轴上的选定标签。

因此，有另一种方法可以实现这一目标。以下是此代码的运行代码 -

JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/

＆＃13;

$(function() {

  $('#container').highcharts({
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'This is custom High Chart'
    },

    pane: {
      center: ['50%', '85%'],
      size: '130%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: '#EEE',
        innerRadius: '80%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    exporting: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    // the value axis
    yAxis: [{
      min: 80,
      max: 100,
      minorTickInterval: 'auto',
      minorTickWidth: 0,
      minorTickLength: 10,
      minorTickPosition: 'outside',
      minorTickColor: '#666',
      tickPixelInterval: 20,
      //tickInterval: 1,
      tickWidth: 0,
      tickPosition: 'outside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
        step: 1,
        distance: 20,
        rotation: 'auto',
        style: {
          fontSize: '14px'
        }
      },
      title: {
        text: ''
      },
      plotBands: [{
        from: 80,
        to: 86,
        color: '#bf0000',
        innerRadius: '60%',
        outerRadius: '100%'
      }, {
        from: 86,
        to: 88,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#fcfe00'
      }, {
        from: 88,
        to: 90,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#00ae50'
      }, {
        from: 90,
        to: 96,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#2f74b4'
      }, {
        from: 96,
        to: 100,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#7131a0'
      }]
    }],
    plotOptions: {
      gauge: {
        dial: {
          backgroundColor: "silver",
          baseLength: "80%",
          baseWidth: 4,
          borderColor: "grey",
          borderWidth: 1,
          radius: "90%",
          rearLength: "0",
          topWidth: 1
        },
        pivot: {
          backgroundColor: "silver",
          borderColor: "grey",
          borderWidth: 1,
          radius: 5
        },
        dataLabels: {
          y: 3,
          style: {
            fontSize: "15px"
          },
          borderWidth: 0,
          useHTML: false
        }
      }
    },
    series: [{
      name: 'Speed',
      data: [90],
      tooltip: {
        valueSuffix: ''
      }
    }]

  });
  
  try{
  var DisplayLabels = [86, 88, 90, 96];
 var labels = $(".highcharts-yaxis-labels > text>tspan");
 labels.each(function(i, node){
   if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
   $(node).hide();
   } else{
    $(node).text($(node).text() + "%");
   }
 });
  } catch(err){
  console.dir(err);
  }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

＆＃13;

希望这会对您有所帮助：）

不等间隔的高图仪表

2 个答案: