Как я могу отобразить несколько угловых датчиков amcharts? - PullRequest
Новая
       17

Как я могу отобразить несколько угловых датчиков amcharts?

0 голосов
/ 02 мая 2018

Итак, я пытаюсь отобразить несколько угловых датчиков, и один работает нормально, а другой показывает 0.

The two charts i get

(я изменил номер div)

Вот код, который я запускаю ...

Спасибо! :) 

<script>
var gaugeChart = AmCharts.makeChart( "chartdiv14", {
  "type": "gauge",
  "theme": "dark",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 20,
    "bands": [ {
      "color": "#ff0000",
      "endValue": 65,
      "startValue": 0
    }, {
      "color": "#f5faf9",
      "endValue": 120,
      "startValue": 65
    }, {
      "color": "#84b761",
      "endValue": 300,
      "innerRadius": "95%",
      "startValue": 120
    } ],
    "bottomText": "0 km/h",
    "bottomTextYOffset": -20,
    "startValue": -80,
    "endValue": 300
  } ],
  "arrows": [ {} ],
  "export": {
    "enabled": false
  }
} );

setInterval( randomValue, 100 );

// set random value
function randomValue() {
  var value3 = Math.round(-4 +  Math.random() );
  var value4 = -4;
  if ( gaugeChart ) {
    if ( gaugeChart.arrows ) {
      if ( gaugeChart.arrows[ 0 ] ) {
        if ( gaugeChart.arrows[ 0 ].setValue ) {
          gaugeChart.arrows[ 0 ].setValue( value3 );
          gaugeChart.axes[ 0 ].setBottomText( value4 + " subs yesterday" );
        }
      }
    }
  }
}
</script>

<script>
var gaugeChart = AmCharts.makeChart( "chartdiv13", {
  "type": "gauge",
  "theme": "dark",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 20,
    "bands": [ {
      "color": "#ff0000",
      "endValue": 65,
      "startValue": 0
    }, {
      "color": "#f5faf9",
      "endValue": 120,
      "startValue": 65
    }, {
      "color": "#84b761",
      "endValue": 300,
      "innerRadius": "95%",
      "startValue": 120
    } ],
    "bottomText": "0 km/h",
    "bottomTextYOffset": -20,
    "endValue": 300
  } 

],
  "arrows": [ {} ],
  "export": {
    "enabled": false
  }
} );

setInterval( randomValue2, 100 );

// set random value
function randomValue2() {
  var value1 = Math.round(53 +  Math.random() );
  var value2 = 53;
  if ( gaugeChart ) {
    if ( gaugeChart.arrows ) {
      if ( gaugeChart.arrows[ 0 ] ) {
        if ( gaugeChart.arrows[ 0 ].setValue ) {
          gaugeChart.arrows[ 0 ].setValue( value1 );
          gaugeChart.axes[ 0 ].setBottomText( value2 + " follows yesterday" );
        }
      }
    }
  }
}
</script>

Я не уверен, является ли это математическим конфликтом или просто синтаксической ошибкой где-то, и, удаляя один, другой начинает работать ...

1 Ответ

0 голосов
/ 03 мая 2018

Вам необходимо изменить переменную на вашей второй калибровочной диаграмме, а также изменить ее в связанной случайной функции. Прямо сейчас вы используете gaugeChart для обоих возвращаемых значений в AmCharts.makeChart, поэтому используется второй график. 

var gaugeChart = AmCharts.makeChart("chartdiv14", {
  // stuff
});

function randomValue() {
 // ...
 // variable references should point to gaugeChart
}

// change the name of this variable for this chart
var gaugeChart2 = AmCharts.makeChart("chartdiv13", {
  // stuff
});

function randomValue2() {
  // ...
  // change references to gaugeChart to gaugeChart2 or whatever name you gave it earlier
}

Демо-версия: 

var gaugeChart = AmCharts.makeChart( "chartdiv14", {
  "type": "gauge",
  "theme": "dark",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 20,
    "bands": [ {
      "color": "#ff0000",
      "endValue": 65,
      "startValue": 0
    }, {
      "color": "#f5faf9",
      "endValue": 120,
      "startValue": 65
    }, {
      "color": "#84b761",
      "endValue": 300,
      "innerRadius": "95%",
      "startValue": 120
    } ],
    "bottomText": "0 km/h",
    "bottomTextYOffset": -20,
    "startValue": -80,
    "endValue": 300
  } ],
  "arrows": [ {} ],
  "export": {
    "enabled": false
  }
} );

setInterval( randomValue, 100 ); //consider setting the values directly in the chart if the value/text is meant to be static instead of calling this every tenth of a second.

// set random value
function randomValue() {
  var value3 = Math.round(-4 +  Math.random() ); //will always return -4 or -3. Consider removing the random part
  var value4 = -4;
  if ( gaugeChart ) {
    if ( gaugeChart.arrows ) {
      if ( gaugeChart.arrows[ 0 ] ) {
        if ( gaugeChart.arrows[ 0 ].setValue ) {
          gaugeChart.arrows[ 0 ].setValue( value3 );
          gaugeChart.axes[ 0 ].setBottomText( value4 + " subs yesterday" );
        }
      }
    }
  }
}

var gaugeChart2 = AmCharts.makeChart( "chartdiv13", {
  "type": "gauge",
  "theme": "dark",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 20,
    "bands": [ {
      "color": "#ff0000",
      "endValue": 65,
      "startValue": 0
    }, {
      "color": "#f5faf9",
      "endValue": 120,
      "startValue": 65
    }, {
      "color": "#84b761",
      "endValue": 300,
      "innerRadius": "95%",
      "startValue": 120
    } ],
    "bottomText": "0 km/h",
    "bottomTextYOffset": -20,
    "endValue": 300
  } 

],
  "arrows": [ {} ],
  "export": {
    "enabled": false
  }
} );

setInterval( randomValue2, 100 ); //consider setting the values directly in the chart if the value/text is meant to be static instead of calling this every tenth of a second.

// set random value
function randomValue2() {
  var value1 = Math.round(53 +  Math.random() ); //will always return 53 or 54. Consider removing the Math.random part.
  var value2 = 53;
  if ( gaugeChart2 ) {
    if ( gaugeChart2.arrows ) {
      if ( gaugeChart2.arrows[ 0 ] ) {
        if ( gaugeChart2.arrows[ 0 ].setValue ) {
          gaugeChart2.arrows[ 0 ].setValue( value1 );
          gaugeChart2.axes[ 0 ].setBottomText( value2 + " follows yesterday" );
        }
      }
    }
  }
}
#chartdiv14, #chartdiv13 {
float: left;
width: 40%;
height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv14"></div>
<div id="chartdiv13"></div>

Обратите внимание, что дрожание стрелки происходит из-за того, что Math.round(.. + Math.random()) возвращает только статическое значение или статическое значение + 1 (то есть 53 или 54 в randomValue2). Возможно, вы захотите полностью удалить случайный бит и просто использовать константу, если это желаемый результат.

...