Как определить colorAxis dataClasses для сплошной калибровочной диаграммы? - PullRequest
Новая
       28

Как определить colorAxis dataClasses для сплошной калибровочной диаграммы?

0 голосов
/ 10 января 2019

Я пытаюсь настроить сплошную измерительную диаграмму для использования определенных цветов для диапазонов, используя colorAxis dataClasses, но это не работает. Не уверен, что я делаю не так.

Как мне определить colorAxis и dataClasses?

Пожалуйста, смотрите http://jsfiddle.net/edob/27oc38L1 ОБНОВЛЕНИЕ !!! Я изменил скрипту, чтобы использовать остановки, и она работала для цветов, определенных как красный, зеленый, а не для шестнадцатеричных цветов! Попробуйте значения как 51, 65 и 81 

 $(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    colorAxis: {
      dataClasses: [{
        from: 0,
        to: 50,
        color: 'red'
      }, {
        from: 50,
        to: 90,
        color: 'green'
      }, {
        from: 90,
        color: 'yellow'

      }]
    },

    series: [{
      name: 'HDD',
      data: [70]

    }]

  });
});

Я вижу синий цвет по умолчанию для любого значения, и я ожидаю увидеть зеленый цвет для значения 70.

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Вместо colorAxis необходимо добавить stops с правильными значениями в yAxis. Я считаю, что это то, что вы ищете рабочий пример . Как я проверил, это не создает градиенты и цвета сплошные. 

$(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    yAxis: {
      stops: [
        [0.5, '#DF5353'], // red
        [0.9, '#55BF3B'], // green
        [1, '#DDDF0D'] // yellow
      ],
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    series: [{
      name: 'HDD',
      data: [49]

    }]

  });
});
<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-cpu" class="chart-container"></div>
0 голосов
/ 10 января 2019

Чтобы закрасить значение твердомера, вы должны использовать стопы, например: 

yAxis: {
  stops: [
    [0.5, 'red'], 
    [0.9, 'green'], 
    [1, 'yellow'] 
  ],
  min: 0,
  max: 100,
  title: {
    text: 'CPU'
  }
},

Только для твердотельных серий. Цвет останавливается для сплошной колеи. Используйте это в случаях, когда линейного градиента между minColor и maxColor недостаточно. Стопы - это массив кортежей, где первый элемент - это число с плавающей точкой от 0 до 1, определяющее относительную позицию в градиенте, а второй элемент - цвет.

Пример работы JSFiddle: http://jsfiddle.net/ewolden/c8qy4x5o/1/

API на остановках: https://api.highcharts.com/highcharts/yAxis.stops

Поскольку в комментарии вы сказали, что хотите использовать сплошные цвета, а не градиенты; Ниже приведен один из способов реализации этого: 

chart: {
  type: 'solidgauge',
  events: {
    load: function() {
      var currentValue = this.series[0].points[0].y;
      var newColor = '';
      console.log(currentValue)
        if(currentValue < 50) {
        newColor = 'red'
      } else if(currentValue < 90) {
        newColor = 'green'
      } else {
        newColor = 'yellow'
      }
      this.series[0].points[0].update({color: newColor}, true)
    }
  }
},

Рабочий пример: http://jsfiddle.net/ewolden/s9qrhtmb/

API для point.update: https://api.highcharts.com/class-reference/Highcharts.Point#update

...