Question

我试图用jquery创建一个延时图形滑块，如下所示。这是我用来说明所面临问题的最小示例，但是，我的实际绘图包含的数据比此处报告的要多。

这里的问题是，当我移动滑块时，基础图形完全不移动。有人可以指出我在这里错过的固有部分吗？

var markers = [{
        "year": 2003,
        "images": [{
            "europe": 2.5,
            "namerica": 2.5
          }]
        }, {
        "year": 2004,
        "images": [{
            "europe": 3.5,
            "namerica": 5.5
          }]
        }]

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
  "theme": "light",
    "legend": {
    "useGraphSettings": true,
    "markerSize": 10
    },
    "dataProvider": markers[0].images,
    "valueAxes": [{
        "stackType": "regular",
    }],
    "graphs": [{
        "title": "Europe",
        "type": "column",
        "valueField": "europe"
    }, {
        "title": "North America",
        "type": "column",
        "valueField": "namerica"
    }],
    "categoryField": "year",
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "export": {
      "enabled": true
     },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      $( "#slider" ).slider({
        "min": 0,
        "max": (markers.length - 1),
        "create": function( event, ui ) {
          var dataSet = markers[0];
          $("#slider .ui-slider-handle").text(dataSet.year);
        },
        "slide": function( event, ui ) {
          var dataSet = markers[ui.value];
          e.chart.dataProvider.images = dataSet.images;
          $(ui.handle).text(dataSet.year);
        }
      });
    }
  }]
});

#chartdiv {
  height: 400px;
}    
#slider {
  margin-top: 20px;
}    
.ui-slider .ui-slider-handle {
  width: 3.2em!important;
  text-align: center;
  margin-left: -1.6em!important;
}

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="JS.js"></script>
<link rel="stylesheet" href="CSS.css">
</head>
<body>
    <div class="container">
      <div id="chartdiv"></div>
      <div id="slider"></div>
    </div>
</body>
</html>

Answer 1

我已经添加了解决方案。

数据更改后，您错过了致电e.chart.validateData();的机会。因此图表会吸收新数据。

而且e.chart.dataProvider = dataSet.images;应该是这样的。

var markers = [{
        "year": 2003,
        "images": [{
            "europe": 2.5,
            "namerica": 2.5
          }]
        }, {
        "year": 2004,
        "images": [{
            "europe": 3.5,
            "namerica": 5.5
          }]
        }]

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
  "theme": "light",
    "legend": {
    "useGraphSettings": true,
    "markerSize": 10
    },
    "dataProvider": markers[0].images,
    "valueAxes": [{
        "stackType": "regular",
    }],
    "graphs": [{
        "title": "Europe",
        "type": "column",
        "valueField": "europe"
    }, {
        "title": "North America",
        "type": "column",
        "valueField": "namerica"
    }],
    "categoryField": "year",
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "export": {
      "enabled": true
     },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      $( "#slider" ).slider({
        "min": 0,
        "max": (markers.length - 1),
        "create": function( event, ui ) {
          var dataSet = markers[0];
          $("#slider .ui-slider-handle").text(dataSet.year);
        },
        "slide": function( event, ui ) {
          var dataSet = markers[ui.value];
          e.chart.dataProvider = dataSet.images;
          e.chart.validateData();
          $(ui.handle).text(dataSet.year);
        }
      });
    }
  }]
});

#chartdiv {
  height: 400px;
}    
#slider {
  margin-top: 20px;
}    
.ui-slider .ui-slider-handle {
  width: 3.2em!important;
  text-align: center;
  margin-left: -1.6em!important;
}

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="JS.js"></script>
<link rel="stylesheet" href="CSS.css">
</head>
<body>
    <div class="container">
      <div id="chartdiv"></div>
      <div id="slider"></div>
    </div>
</body>
</html>

jQuery滑块与AmChart

1 个答案: