0
AmChartsの株価チャートのデータセットの値を更新しようとしています。問題は、私が直面しているのは、年を入力すると凡例の年が表示されますが、データを検証した後でもグラフには表示されません。このグラフは、同じアイテムの異なる年のデータを表すためのグラフです。 私が年を入力-ifあなたは>ここ株価チャートamchartがデータを動的に更新しない
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 {
\t width \t : 100%;
\t height \t : 500px;
font-family: Verdana;
font-size: 12px;
} \t \t \t \t \t \t \t<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> \t \t \t \t \t \t \thttps://codepen.io/rbrohitbisht/pen/yMWmPz?editors=0010
をコードを見ることができ、2000年を言うと、それは価値なし凡例に示し、それを提出します。 - BaseYearと入力すると値が表示されます。
在庫のamchartで新しいデータセットを取得することができません。別の年に同じアイテムの値を表示しようとしています。
おかげで多くのことを。 –