如何显示多个amcharts角度计？

Question

所以我试图显示多个角度计，一个工作正常但另一个显示为0.

（我更改了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>

我不确定这是一个数学冲突还是某个地方的语法错误，并且通过删除一个其他开始工作......

Answer 1

您需要更改第二个仪表图表中的变量，并在相关的随机函数中更改它。现在你在AmCharts.makeChart中使用gaugeChart两个返回值，所以正在使用第二个图表。

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（即randomValue2中的53或54）。您可能希望完全删除随机位，只需使用常量，如果这是期望的结果。