Калибровочная таблица, как уменьшить ширину серии? - PullRequest
Новая
       32

Калибровочная таблица, как уменьшить ширину серии?

0 голосов
/ 10 мая 2019

Я пытаюсь создать диаграмму с помощью Highcharts.Мне нужно уменьшить ширину моей серии, но, к сожалению, я не нашел, как это сделать с старшими чартами.

Это мой желаемый результат:

enter image description here

И я делаю этот датчик: 

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '65%',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },

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

  tooltip: {
    borderWidth: 0,
    color: 'black',
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '13px'
    },
    align: 'center',
    useHTML: true,
    pointFormat: '<div style="font-size:2em; font-weight: bold;">{point.y}%</div><br><div style="text-align: center;">{series.name}</div>',
    positioner: function(labelWidth) {
      return {
        x: (this.chart.chartWidth - labelWidth) / 2,
        y: (this.chart.plotHeight / 2) - 22
      };
    }
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ 
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      rounded: true
    }
  },

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '63%',
      y: 64
    }]
  }]
});

(function(H) {
  H.wrap(H.Tooltip.prototype, 'hide', () => {});
}(Highcharts));

var obj = document.getElementById('container')
var chart = Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
var tooltipPoint = chart.series[0].points[0];
chart.tooltip.refresh(tooltipPoint);
#container {
  margin: 0 auto;
  max-width: 400px;
  min-width: 380px;
}

.highcharts-credits {
  display: none;
}
<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"></div>

Но, как вы видите, ширина моей серии слишком велика.Есть способ уменьшить эту ширину?

1 Ответ

2 голосов
/ 10 мая 2019

Вы можете достичь этого, увеличив pane.background.innerRadius и series.data.innerRadius.

Код: 

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{
      outerRadius: '87%',
      innerRadius: '80%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  }

  ...

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '80%',
      y: 64
    }]
  }]

Демо:

Ссылка API:

...