我试图在AmCharts的Stock Chart中更新数据集的值。问题，我面临的是当我输入一年然后它在图例中显示年份但它没有出现在图表中，即使在验证数据之后也是如此。此图表用于表示同一项目的不同年份的数据。 您可以在此处查看代码＆gt;
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，则显示值。
我无法在股票行情表中获取新数据集，我试图在不同年份显示相同的项目值。
答案 0 :(得分：0)
您在addInitHandler中设置的基准年插件仅在图表初始化时运行一次（init事件）。 validateData和validateNow不会重新触发该事件，因此您必须手动重新运行该基准年代插件代码。
这样做的一种方法是将函数创建为AmCharts命名空间的一部分，以便也可以在init上下文之外调用它：
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>