股票图表 amchart 没有动态更新数据

Question

我正在尝试更新 AmCharts 股票图表中数据集的值。问题，我面临的是当我输入一年时，它会在图例中显示年份，但即使在验证数据之后，它也没有出现在图表中。该图用于表示同一项目的不同年份的数据。 代码可以看这里>

var chart;
/**
 * Function that generates yearly data
 * Takes year as a parameter
 */
function generateChartData(year) {
  var data = [];
  var firstDate = new Date(year, 0, 1);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 365; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    data.push({
      date: newDate,
      value: Math.round(Math.random() * (40 + i)) + 100 + i
    });
  }
  return data;
}

/**
  Prepare random data for our trhee data sets: 2015, 2014 and 2013
 */
var chartData2015 = generateChartData(2015);
var chartData2014 = generateChartData(2014);
var chartData2013 = generateChartData(2013);

/**
 * Now, let's implement a "plugin" which, when chart loads
 * would check all it's data sets and look for "baseYear" properietary
 * setting, which would indicate to which year should all dates be
 * reset
 * ---
 * NOTE: the plugin assumes there are Date objects as categories.
 * If dates as specified as timestamps or strings, plugin code will
 * need to be updated.
 */

AmCharts.addInitHandler(function(chart) {
  for(var x = 0; x < chart.dataSets.length; x++) {
    var ds = chart.dataSets[x];
    if (ds.baseYear !== undefined) {
      for(var i = 0; i < ds.dataProvider.length; i++) {
        var dp = ds.dataProvider[i];
        dp[ds.categoryField].setFullYear(ds.baseYear);
      }
    }
  }
}, ["stock"]);
/**
 * Build the chart
 */
chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",
  "dataSets": [{
      "title": "2015",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }],
      "dataProvider": chartData2015,
      "categoryField": "date"
    }, {
      "title": "2014",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }],
      "dataProvider": chartData2014,
      "categoryField": "date",
      "compared": true,
      "baseYear": 2015
    }, {
      "title": "2013",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }],
      "dataProvider": chartData2013,
      "categoryField": "date",
      "compared": true,
      "baseYear": 2015
    }],

  "panels": [{
    "title": "Value",
    "categoryAxis": {},
    "stockGraphs": [{
      "id": "g1",
      "valueField": "value",
      "lineThickness": 2,
      "comparable": true,
      "compareField": "value",
      "balloonText": "[[title]]:<b>[[value]]</b>",
      "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>",
      "compareGraph": {
        "dashLength": 5,
        "lineThickness": 2
      }
    }],

    "stockLegend": {
      "periodValueTextComparing": "[[percents.value.close]]%",
      "periodValueTextRegular": "[[value.close]]"
    }
  }],
  
  "panelsSettings": {
    "recalculateToPercents": "never"
  },

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },
  "periodSelector": {
    "position": "bottom",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  }

});
$('document').ready(function(){
  $('#submit').on('click',function(){
    //alert(document.getElementById('year').value);
    add(document.getElementById('year').value);
 //   make();
  });
});

function add(yr){
  chart.dataSets.push( {
      "title": yr,
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }],
      "dataProvider": generateChartData(yr),
      "categoryField": "date",
      "compared": true,
      "baseYear": 2015
    } );
  chart.validateNow();
  chart.validateData();
}

#chartdiv {
	width	: 100%;
	height	: 500px;
  font-family: Verdana;
  font-size: 12px;
}							

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script>
<input type="text" id="year"><input type="submit" id="submit">
<div id="chartdiv"></div>							

https://codepen.io/rbrohitbisht/pen/yMWmPz?editors=0010

-如果我输入年份，比如说 2000 并提交它，那么它会显示在没有值的图例中。 - 如果我输入 BaseYear 然后它会显示值。

我无法在 stock amchart 中获取新数据集，我试图在其中显示不同年份的相同项目值。

Answer 1

您在addInitHandler 中设置的基准年插件仅在图表初始化时运行一次（init 事件）。 validateData 和 validateNow 不会重新触发该事件，因此您必须手动重新运行该基准年插件代码。

一种方法是创建函数作为 AmCharts 命名空间的一部分，这样它也可以在初始化上下文之外调用：

AmCharts.addInitHandler(function(chart) {
  AmCharts.baseYearInitialize = function(chart) {
    for (var x = 0; x < chart.dataSets.length; x++) {
      var ds = chart.dataSets[x];
      if (ds.baseYear !== undefined) {
        for (var i = 0; i < ds.dataProvider.length; i++) {
          var dp = ds.dataProvider[i];
          dp[ds.categoryField].setFullYear(ds.baseYear);
        }
      }
    }
  }
  AmCharts.baseYearInitialize(chart);
}, ["stock"]);

这允许您在 add 方法中调用它：

function add(yr) {
  chart.dataSets.push({
    "title": yr,
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],
    "dataProvider": generateChartData(yr),
    "categoryField": "date",
    "compared": true,
    "baseYear": 2015
  });
  AmCharts.baseYearInitialize(chart);
  // chart.validateNow();
  chart.validateData();
}

请注意，您不需要同时调用 validateNow 和 validateData - 在这种情况下，只需 validateData 就足够了。

下面的演示：

var chart;
/**
 * Function that generates yearly data
 * Takes year as a parameter
 */
function generateChartData(year) {
  var data = [];
  var firstDate = new Date(year, 0, 1);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 365; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    data.push({
      date: newDate,
      value: Math.round(Math.random() * (40 + i)) + 100 + i
    });
  }
  return data;
}

/**
  Prepare random data for our trhee data sets: 2015, 2014 and 2013
 */
var chartData2015 = generateChartData(2015);
var chartData2014 = generateChartData(2014);
var chartData2013 = generateChartData(2013);

/**
 * Now, let's implement a "plugin" which, when chart loads
 * would check all it's data sets and look for "baseYear" properietary
 * setting, which would indicate to which year should all dates be
 * reset
 * ---
 * NOTE: the plugin assumes there are Date objects as categories.
 * If dates as specified as timestamps or strings, plugin code will
 * need to be updated.
 */

AmCharts.addInitHandler(function(chart) {
  AmCharts.baseYearInitialize = function(chart) {
    for (var x = 0; x < chart.dataSets.length; x++) {
      var ds = chart.dataSets[x];
      if (ds.baseYear !== undefined) {
        for (var i = 0; i < ds.dataProvider.length; i++) {
          var dp = ds.dataProvider[i];
          dp[ds.categoryField].setFullYear(ds.baseYear);
        }
      }
    }
  }
  AmCharts.baseYearInitialize(chart);
}, ["stock"]);
/**
 * Build the chart
 */
chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",
  "dataSets": [{
    "title": "2015",
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],
    "dataProvider": chartData2015,
    "categoryField": "date"
  }, {
    "title": "2014",
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],
    "dataProvider": chartData2014,
    "categoryField": "date",
    "compared": true,
    "baseYear": 2015
  }, {
    "title": "2013",
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],
    "dataProvider": chartData2013,
    "categoryField": "date",
    "compared": true,
    "baseYear": 2015
  }],

  "panels": [{
    "title": "Value",
    "categoryAxis": {},
    "stockGraphs": [{
      "id": "g1",
      "valueField": "value",
      "lineThickness": 2,
      "comparable": true,
      "compareField": "value",
      "balloonText": "[[title]]:<b>[[value]]</b>",
      "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>",
      "compareGraph": {
        "dashLength": 5,
        "lineThickness": 2
      }
    }],

    "stockLegend": {
      "periodValueTextComparing": "[[percents.value.close]]%",
      "periodValueTextRegular": "[[value.close]]"
    }
  }],

  "panelsSettings": {
    "recalculateToPercents": "never"
  },

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },
  "periodSelector": {
    "position": "bottom",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  }

});
$('document').ready(function() {
  $('#submit').on('click', function() {
    //alert(document.getElementById('year').value);
    add(document.getElementById('year').value);
    //   make();
  });
});

function add(yr) {
  chart.dataSets.push({
    "title": yr,
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],
    "dataProvider": generateChartData(yr),
    "categoryField": "date",
    "compared": true,
    "baseYear": 2015
  });
  AmCharts.baseYearInitialize(chart);
 // chart.validateNow();
  chart.validateData();
}

#chartdiv {
  width: 100%;
  height: 500px;
  font-family: Verdana;
  font-size: 12px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script>
<input type="text" id="year"><input type="submit" id="submit">
<div id="chartdiv"></div>