计算/调整量规表中的针(Plotly JS)

时间:2018-11-08 15:58:59

标签: javascript d3.js charts chart.js plotly

我无法在针距表中画针。

我希望指针响应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)

我认为我必须弄乱“ needle”计算,并以某种方式将其放在我的x和y坐标中,但是我不知道从哪里开始。您也可以在我的公开情节中查看该图表:https://plot.ly/~bigpimpatl/4/

0 个答案:

没有答案