複数のamcharts角度ゲージを表示するにはどうすればよいですか?

Bloggy

したがって、複数の角度ゲージを表示しようとしています。1つは正常に機能しますが、もう1つは0を表示します。

私が得る2つのチャート

(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

2番目のゲージチャートで変数を変更し、関連するランダム関数でも変数を変更する必要があります。現在gaugeChart、AmCharts.makeChartの両方の戻り値に使用しているため、2番目のグラフが使用されています。

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

関連記事

分類Dev

PageViewで複数のページを表示するにはどうすればよいですか?

分類Dev

角度6でテーブルの個別の列に複数の行の値の合計を表示するにはどうすればよいですか?

分類Dev

webpackで複数のターゲットを構築するにはどうすればよいですか?

分類Dev

複数の解像度のゲームを設計するにはどうすればよいですか?

分類Dev

複数のページでナビゲーションバーを一定にするにはどうすればよいですか?

分類Dev

HighMapsに複数のデータポイントを表示するにはどうすればよいですか?

分類Dev

複数の入力でデータ表示を使用するにはどうすればよいですか?

分類Dev

複数のページ間でPHP変数を共有するにはどうすればよいですか?

分類Dev

pdfjs:すべてのページを表示するために複数のキャンバスを作成するにはどうすればよいですか?

分類Dev

複数のエラーを含むエラーメッセージをすばやく表示するにはどうすればよいですか?

分類Dev

複数のローカル通知を表示するにはどうすればよいですか?

分類Dev

Chrome OSで複数の画像を1ページに印刷するにはどうすればよいですか?

分類Dev

複数のWebページでデータを保持するにはどうすればよいですか

分類Dev

1つのページに複数のUIPickerViewを実装するにはどうすればよいですか?

分類Dev

1ページに複数の画像を自動的に印刷するにはどうすればよいですか?

分類Dev

変数(キー)の値をHTMLページに表示するにはどうすればよいですか?

分類Dev

複数のオブジェクトの内部をターゲットにするにはどうすればよいですか

分類Dev

Xcodeプロジェクトのポッドファイルで複数のターゲットを指定するにはどうすればよいですか?

分類Dev

複数のページを表示するために単一のhtmlファイルを作成するにはどうすればよいですか?

分類Dev

FragmentStatePageAdapter:同時に表示される複数のアイテム-特定のページを中央に配置するにはどうすればよいですか?

分類Dev

すべてのノードで複数のJenkinsジョブの実行ステータスを表示するにはどうすればよいですか?

分類Dev

amChartsでy軸のタイトルを水平に表示するにはどうすればよいですか?

分類Dev

ReportViewerに複数のページ(たとえば、DataRowごとに1ページ)を表示させるにはどうすればよいですか?

分類Dev

管理ページのデータベースからzii.widgets.grid.CGridViewに複数の学生名を表示するにはどうすればよいですか?

分類Dev

複数の受信者にメッセージを送信するにはどうすればよいですか?

分類Dev

git commitメッセージを複数の行に分割するにはどうすればよいですか?

分類Dev

アプリを複数のパッケージに分割するにはどうすればよいですか?

分類Dev

SQLで複数のWHEREをマージするにはどうすればよいですか(STUCK)

分類Dev

Rakeで複数のパッケージを生成するにはどうすればよいですか?

Related 関連記事

  1. 1

    PageViewで複数のページを表示するにはどうすればよいですか?

  2. 2

    角度6でテーブルの個別の列に複数の行の値の合計を表示するにはどうすればよいですか?

  3. 3

    webpackで複数のターゲットを構築するにはどうすればよいですか?

  4. 4

    複数の解像度のゲームを設計するにはどうすればよいですか?

  5. 5

    複数のページでナビゲーションバーを一定にするにはどうすればよいですか?

  6. 6

    HighMapsに複数のデータポイントを表示するにはどうすればよいですか?

  7. 7

    複数の入力でデータ表示を使用するにはどうすればよいですか?

  8. 8

    複数のページ間でPHP変数を共有するにはどうすればよいですか?

  9. 9

    pdfjs:すべてのページを表示するために複数のキャンバスを作成するにはどうすればよいですか?

  10. 10

    複数のエラーを含むエラーメッセージをすばやく表示するにはどうすればよいですか?

  11. 11

    複数のローカル通知を表示するにはどうすればよいですか?

  12. 12

    Chrome OSで複数の画像を1ページに印刷するにはどうすればよいですか?

  13. 13

    複数のWebページでデータを保持するにはどうすればよいですか

  14. 14

    1つのページに複数のUIPickerViewを実装するにはどうすればよいですか?

  15. 15

    1ページに複数の画像を自動的に印刷するにはどうすればよいですか?

  16. 16

    変数(キー)の値をHTMLページに表示するにはどうすればよいですか?

  17. 17

    複数のオブジェクトの内部をターゲットにするにはどうすればよいですか

  18. 18

    Xcodeプロジェクトのポッドファイルで複数のターゲットを指定するにはどうすればよいですか?

  19. 19

    複数のページを表示するために単一のhtmlファイルを作成するにはどうすればよいですか?

  20. 20

    FragmentStatePageAdapter:同時に表示される複数のアイテム-特定のページを中央に配置するにはどうすればよいですか?

  21. 21

    すべてのノードで複数のJenkinsジョブの実行ステータスを表示するにはどうすればよいですか?

  22. 22

    amChartsでy軸のタイトルを水平に表示するにはどうすればよいですか?

  23. 23

    ReportViewerに複数のページ(たとえば、DataRowごとに1ページ)を表示させるにはどうすればよいですか?

  24. 24

    管理ページのデータベースからzii.widgets.grid.CGridViewに複数の学生名を表示するにはどうすればよいですか?

  25. 25

    複数の受信者にメッセージを送信するにはどうすればよいですか?

  26. 26

    git commitメッセージを複数の行に分割するにはどうすればよいですか?

  27. 27

    アプリを複数のパッケージに分割するにはどうすればよいですか?

  28. 28

    SQLで複数のWHEREをマージするにはどうすればよいですか(STUCK)

  29. 29

    Rakeで複数のパッケージを生成するにはどうすればよいですか?

ホットタグ

アーカイブ