如何显示多个Amcharts角度规?

博客

因此,我尝试显示多个角度规,一个工作正常,但另一个显示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>

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

Xorspark

您需要在第二个量表中更改变量,并在关联的随机函数中进行更改。现在,您正在使用gaugeChartAmCharts.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 in randomValue2)引起的。您可能希望完全删除随机位,并且如果期望的结果使用常数就可以。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章