6

米国の失業率の jVectorMap サンプル ビジュアライゼーションを再作成しようとしています。コードはgithubから直接取得しました。マップが読み込まれず、コンソールに「jvm が定義されていません」というエラーが表示されます。

コードは次のとおりです。

  <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"/>
      <title>Maps</title>
      <link rel="stylesheet" media="all" href="../jvectormap/jquery-jvectormap.css"/>
      <link rel="stylesheet" media="all" href="css/jquery-ui-1.8.21.custom.css"/>
      <script src="../jvectormap/tests/assets/jquery-1.8.2.js"></script>
      <script src="../jquery-jvectormap.js"></script>
      <script src="../jvectormap/tests/assets/jquery-jvectormap-us-aea-en.js"></script>
      <script src="jquery-ui-1.8.21.custom.min.js"></script>

  <script>
    $(function(){
      $.getJSON('data.json', function(data){
        var val = 2009;
            statesValues = jvm.values.apply({}, jvm.values(data.states)),
            metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
            metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));

        $('.map').vectorMap({
          map: 'us_aea_en',
          markers: data.metro.coords,
          series: {
            markers: [{
              attribute: 'fill',
              scale: ['#FEE5D9', '#A50F15'],
              values: data.metro.unemployment[val],
              min: jvm.min(metroUnemplValues),
              max: jvm.max(metroUnemplValues)
            },{
              attribute: 'r',
              scale: [5, 20],
              values: data.metro.population[val],
              min: jvm.min(metroPopValues),
              max: jvm.max(metroPopValues)
            }],
            regions: [{
              scale: ['#DEEBF7', '#08519C'],
              attribute: 'fill',
              values: data.states[val],
              min: jvm.min(statesValues),
              max: jvm.max(statesValues)
            }]
          },
          onMarkerLabelShow: function(event, label, index){
            label.html(
              '<b>'+data.metro.names[index]+'</b><br/>'+
              '<b>Population: </b>'+data.metro.population[val][index]+'</br>'+
              '<b>Unemployment rate: </b>'+data.metro.unemployment[val][index]+'%'
            );
          },
          onRegionLabelShow: function(event, label, code){
            label.html(
              '<b>'+label.html()+'</b></br>'+
              '<b>Unemployment rate: </b>'+data.states[val][code]+'%'
            );
          }
        });

        var mapObject = $('.map').vectorMap('get', 'mapObject');

        $(".slider").slider({
          value: val,
          min: 2005,
          max: 2009,
          step: 1,
          slide: function( event, ui ) {
            val = ui.value;
            mapObject.series.regions[0].setValues(data.states[ui.value]);
            mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
            mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
          }
        });
      });
    })
  </script>
</head>
<body>
  <div class="map" style="width: 800px; height: 600px"></div>
  <div class="slider" style="width: 280px; margin: 10px"></div>
</body>
</html>
4

7 に答える 7

16

私はこれとまったく同じ問題を抱えていました。問題は、ダウンロードしたZIPファイルがリダイレクトされることです。

<script src="../jquery-jvectormap.js"></script>

実際には、JVMを呼び出すJSファイルであり、実際のJVMライブラリではありません（これが、「JVMが定義されていません」というエラーが発生する理由です。

私がそれを修正した方法は、ファイルを取ることでした

http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js

それを私のプロジェクトに含めます。

これが実際のJVMライブラリであり、.vectorMap呼び出しを行う前にそれが含まれている限り、それはあなたにとって非常にうまく機能します。

于 2013-02-04T06:58:54.270 に答える
5

したがって、縮小されていないjsファイルを使用しています。ライブラリを含まないメイン コードのみが含まれます。

このエラーを修正するには、2 つの解決策があります。

  1. 必要なすべてのライブラリを追加します。lib/ディレクトリで見つけることができます。ファイルの例と追加する必要がある順序は、tests/index.htmlファイル 内にあります

  2. 縮小された js を作成します。NIX システムを使用して実行する必要があります./build.sh。uglifyjs ユーティリティをインストールする必要があるかもしれません。たとえば、ここから npm をインストールしてから実行できます。npm install uglify-js@1

于 2013-01-24T10:44:13.913 に答える
1

縮小されたファイルには、必要なさまざまなファイルがすべて含まれているように見えますが、含まれてjquery-jvectormap.jsいません。したがって、縮小されていないバージョンを使用する場合は、必要なすべてのさまざまなファイルを手動でロードする準備をする必要がありjquery-jvectormap.jsます.map.jsvector-canvas.js/src

于 2016-09-17T22:44:45.267 に答える
0

適切なファイルをローカルに保存したい場合、たとえば bower を使用している場合は、この「ビルド済み」バージョンの jvectormapを GitHub でも使用できます。

于 2014-12-27T17:33:51.303 に答える
0

、、および変数宣言はstatesValues、 .で終わる独自のステートメントである必要があります。現在、行は . で終了しています。metroPopValuesmetroUnempValues;,

var val = 2009;
var statesValues = jvm.values.apply({}, jvm.values(data.states));
var metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population));
var metroUnemplValues = Array.prototype.concat([], jvm.values(data.metro.unemployment));
于 2013-01-15T01:11:11.760 に答える
-2

jVectorMap についてはあまり説明しませんが、単純な観察です。

あなたのコードでは、変数「jvm」はどこにも定義されていません。コードで使用されている JS ファイルをチェックし、'jvm' 変数の初期化に注意するのは良い考えではないでしょうか?

于 2013-01-14T10:13:13.910 に答える