Расчет / регулировка иглы в калибровочной диаграмме (Plotly JS) - PullRequest
Новая
       16

Расчет / регулировка иглы в калибровочной диаграмме (Plotly JS)

0 голосов
/ 08 ноября 2018

У меня проблемы с прорисовкой стрелки на графике с точным зазором.

Я хочу, чтобы стрелка реагировала на значение из объекта JSON. Вот как выглядит мой сюжет:

Gauge Chart

Итак, если значение равно 2, я хочу, чтобы оно указывало на раздел «2-3». В документации Plotly мне не было ясно, как запрограммировать градусы и радианы, чтобы они соответствовали тому, что мне нужно. Вот мой код JS: 

// part of data to input
    var traceGauge = {
      type: 'pie',
      showlegend: false,
      hole: 0.4,
      rotation: 90,
      values: [ 81/9, 81/9, 81/9, 81/9, 81/9, 81/9, 81/9, 81/9, 81/9, 81],
      text: ['0-1','1-2','2-3','3-4','4-5','5-6','6-7','7-8','8-9'],
      direction: 'clockwise',
      textinfo: 'text',
      textposition: 'inside',
      marker: {
        colors: ['','','','','','','','','','white'],
        labels: ['0-1','1-2','2-3','3-4','4-5','5-6','6-7','7-8','8-9'],
        hoverinfo: 'label'
      }
    }

    // needle
    var degrees = 50, radius = .9
    var radians = degrees * Math.PI / 180
    var x = -1 * radius * Math.cos(radians) * wfreqNum
    var y = radius * Math.sin(radians)

    var gaugeLayout = {
      shapes: [{
        type: 'line',
        x0: 0.5,
        y0: 0.5,
        x1: 0.6,
        y1: 0.6,
        line: {
          color: 'black',
          width: 3
        }
      }],
      title: 'Chart',
      xaxis: {visible: false, range: [-1, 1]},
      yaxis: {visible: false, range: [-1, 1]}
    }

    var dataGauge = [traceGauge]

    Plotly.plot('gauge', dataGauge, gaugeLayout)

Я думаю, что мне нужно возиться с «игольчатыми» вычислениями и каким-то образом поместить это в мои координаты x и y, но я не знаю, с чего начать. Вы также можете просмотреть график на моем публичном сюжете: https://plot.ly/~bigpimpatl/4/

...