为什么添加新订单（新数据）时我的Amchart不会更新？
基本上现在发生的事情是，无论何时发出另一个订单，您都需要刷新页面以将其重新显示回图表，而不是更新图表。
{{HTML::style('assets/amcharts/style.css')}}
{{ HTML::script('assets/amcharts/amcharts.js') }}
{{ HTML::script('assets/amcharts/serial.js') }}
{{ HTML::script('assets/amcharts/amstock.js') }}
<script type="text/javascript">
var chart;
var defaultLoad=false;
AmCharts.loadJSON=function(timeSpan,buttonClick){
chartData=[];
createStockChart();
var timeSpan_ = '6 hour';
//console.log('timeSpan:',timeSpan);
switch(timeSpan){
case "1DD":
timeSpan_ = '1 day';
break;
case "3DD":
timeSpan_ = '3 day';
break;
case "7DD":
timeSpan_ = '7 day';
break;
case "MAX":
timeSpan_ = 'MAX';
break;
default:
timeSpan_ = '6 hour';
}
console.log('timeSpan_:',timeSpan_);
$('.loading').show();
$.ajax({
url:"<?php echo action('HomeController@getChart')?>",
type:'post',
dataType:'json',
data: {Ajax:1,timeSpan:timeSpan_,market_id:<?php echo $market_id ?>},
cache:false,
async:true,
success:function(rows){
console.log('rows: ',rows);
$('.loading').hide();
for(var i=0; i<rows.length; i++){
//console.log('chartData '+i+': ',rows[i]);
var open=parseFloat(rows[i]['open']).toFixed(8);
var close=parseFloat(rows[i]['close']).toFixed(8);
var high=parseFloat(rows[i]['high']).toFixed(8);
var low=parseFloat(rows[i]['low']).toFixed(8);
//console.log('rows '+i+' date: '+rows[i]['date']+' open: '+open+' close: '+close+' high: '+high+' low: '+low);
chartData.push({date:rows[i]['date'],open:open,close:close,high:high,low:low,exchange_volume:rows[i]['exchange_volume']});
}
//console.log('chartData: ',chartData);
//date=rows[rows.length-1]['date'];
//date=new Date(date.replace(" ","T")+'Z');
//var localOffset=date.getTimezoneOffset()*60000;
//date.setTime(date.getTime()+ 600000+ localOffset);
//chartData.push({date:date,open:rows[rows.length-1]['close'],close:rows[rows.length-1]['close'],high:rows[rows.length-1]['close'],low:rows[rows.length-1]['close'],exchange_volume:0});
chart.dataProvider=chartData;
chart.validateNow();
if(buttonClick===false){
$('input[value="6 hours"]').click();
}else{
//$('input[value="MAX"]').removeClass('amChartsButtonSelected').addClass('amChartsButton');
$('.amChartsPeriodSelector input[type=button]').removeClass('amChartsButtonSelected').addClass('amChartsButton');
if(timeSpan=='6hh'){
$('input[value="6 hours"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='1DD'){
$('input[value="24 hours"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='3DD'){
$('input[value="3 days"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='7DD'){
$('input[value="1 week"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else{
$('input[value="MAX"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}
}
}
});
};
function buttonClickHandler(data){
console.log('buttonClickHandler:',data);
if(defaultLoad===true){
if(typeof data.count!=='undefined'){AmCharts.loadJSON(data.count+ data.predefinedPeriod,true);
}else{
AmCharts.loadJSON(data.predefinedPeriod,true);
}
}else{
defaultLoad=true;
}
}
AmCharts.ready(function(){AmCharts.loadJSON('6hh',false);
createStockChart();
});
function createStockChart(){
chart=new AmCharts.AmStockChart();
chart.pathToImages="/assets/js/amcharts/images/";
var categoryAxesSettings=new AmCharts.CategoryAxesSettings();
categoryAxesSettings.minPeriod="10mm";
categoryAxesSettings.groupToPeriods=["10mm","30mm","hh","3hh","6hh","12hh","DD"];
chart.categoryAxesSettings=categoryAxesSettings;
chart.dataDateFormat="YYYY-MM-DD JJ:NN";
var dataSet=new AmCharts.DataSet();
dataSet.color="#7f8da9";
dataSet.fieldMappings=[
{fromField:"open",toField:"open"},
{fromField:"close",toField:"close"},
{fromField:"high",toField:"high"},
{fromField:"low",toField:"low"},
{fromField:"exchange_volume",toField:"exchange_volume"}
];
dataSet.dataProvider=chartData;
dataSet.categoryField="date";
chart.dataSets=[dataSet];
var stockPanel1=new AmCharts.StockPanel();
stockPanel1.showCategoryAxis=false;
stockPanel1.title="Price";
stockPanel1.percentHeight=70;
stockPanel1.numberFormatter={precision:8,decimalSeparator:'.',thousandsSeparator:','};
var graph1=new AmCharts.StockGraph();
graph1.valueField="value";
graph1.type="candlestick";
graph1.openField="open";
graph1.closeField="close";
graph1.highField="high";
graph1.lowField="low";
graph1.valueField="close";
graph1.lineColor="#6bbf46";
graph1.fillColors="#6bbf46";
graph1.negativeLineColor="#F87A06";//"#db4c3c";
graph1.negativeFillColors="#F87A06";//"#db4c3c";
graph1.fillAlphas=1;
graph1.balloonText="open:<b>[[open]]</b><br>close:<b>[[close]]</b><br>low:<b>[[low]]</b><br>high:<b>[[high]]</b>";
graph1.useDataSetColors=false;
stockPanel1.addStockGraph(graph1);
var stockLegend1=new AmCharts.StockLegend();
stockLegend1.valueTextRegular=" ";
stockLegend1.markerType="none";
stockPanel1.stockLegend=stockLegend1;
var stockPanel2=new AmCharts.StockPanel();
stockPanel2.title="Volume";
stockPanel2.percentHeight=30;
stockPanel2.numberFormatter={precision:3,decimalSeparator:'.',thousandsSeparator:','};
var graph2=new AmCharts.StockGraph();
graph2.valueField="exchange_volume";
graph2.type="column";
graph2.cornerRadiusTop=2;
graph2.fillAlphas=1;
graph2.periodValue="Sum";
stockPanel2.addStockGraph(graph2);
var stockLegend2=new AmCharts.StockLegend();
stockLegend2.valueTextRegular=" ";
stockLegend2.markerType="none";
stockPanel2.stockLegend=stockLegend2;
chart.panels=[stockPanel1,stockPanel2];
var cursorSettings=new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled=true;
cursorSettings.fullWidth=true;
cursorSettings.cursorAlpha=0.1;
chart.chartCursorSettings=cursorSettings;
var periodSelector=new AmCharts.PeriodSelector();
periodSelector.position="top";
periodSelector.dateFormat="YYYY-MM-DD JJ:NN";
periodSelector.inputFieldWidth=150;
periodSelector.inputFieldsEnabled=false;
periodSelector.hideOutOfScopePeriods=false;
periodSelector.periods=[
{period:"hh",count:6,label:"6 hours",selected:true},
{period:"DD",count:1,label:"24 hours"},
{period:"DD",count:3,label:"3 days"},
{period:"DD",count:7,label:"1 week"},
{period:"MAX",label:"MAX"}
];
periodSelector.addListener('changed',function(period){buttonClickHandler(period);});
chart.periodSelector=periodSelector;
var panelsSettings=new AmCharts.PanelsSettings();
panelsSettings.usePrefixes=false;
chart.panelsSettings=panelsSettings;
var valueAxis=new AmCharts.ValueAxis();
valueAxis.precision=8;
chart.valueAxis=valueAxis;
chart.chartScrollbarSettings.enabled=false;
chart.write('chartdiv');
}
function use_price(type, price, total_amount){
// var pre = 'b_';
// if(type==2) pre = 's_';
// $('#'+pre+'price').val(price.toFixed(8));
// $('#'+pre+'amount').val(total_amount.toFixed(8));
$('#s_price').val(price.toFixed(8));
$('#s_amount').val(total_amount.toFixed(8));
$('#b_price').val(price.toFixed(8));
$('#b_amount').val(total_amount.toFixed(8));
updateDataSell();
updateDataBuy();
}
</script>
@stop
忘了包含这个：
<script type="text/javascript" src="{{ asset('assets/googlechart/jsapi.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/amcharts/amcharts.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/amcharts/serial.js') }}"></script>
<script type="text/javascript">
function drawVisualization() {
var dashboard;
var chartData=[];
var timeSpan_ = '1 day';
var data;
$.ajax({
url:"<?php echo action('HomeController@getChart')?>",
type:'post',
dataType:'json',
data: {Ajax:1,timeSpan:timeSpan_,market_id:<?php echo $market_id ?>},
cache:false,
async:true,
success:function(rows){
//console.log('rows: ',rows);
$('.loading').hide();
for(var i=0; i<rows.length; i++){
rows[i][0]=new Date(rows[i][0]);
//console.log('rows '+i+': ',rows[i][0]);
//data.addRow([rows[i][0], '<div class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" visibility="visible" transform="translate(570,40)" opacity="1">Hellllocccccccc</div>', rows[i][1], rows[i][2], rows[i][3], rows[i][4], rows[i][5]]);
}
//console.log('data: ',data);
data = google.visualization.arrayToDataTable(rows, true);
var rCandlestickChart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',//'CandlestickChart',
containerId: 'chart_div',
options: {
height: 300,
fontName: '"Open Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif',
backgroundColor: "transparent",
chartArea: {height: "70%", width: "90%"},
hAxis: {slantedText: !1, minTextSpacing: "40", maxAlternation: 1},
vAxis: {format: "#,#####0.00000"},
legend: 'none',//{position: "none"},
tooltip: {isHtml: true},
seriesType: "bars",
series: {
0: {
type: "candlesticks",
targetAxisIndex: 0,
color: "black",
candlestick: {
fallingColor: {
fill: "#0ab92b",
stroke: "green",
color: "green",
strokeWidth: 1
},
risingColor: {
fill: "#f01717",
stroke: "#d91e1e",
color: "#d91e1e",
strokeWidth: 1
}
}
},
1: {
type: "bars",
targetAxisIndex:1,
color:"#4EBDE7"
}
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartType: "ComboChart",
backgroundColor: {fill: "transparent"},
chartOptions: {
fontName: '"Open Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif',
backgroundColor: {fill: "transparent"},
height: 70,
chartArea: {width: "90%", backgroundColor: {fill: "transparent"}, height: 50},
seriesType: "bars",
series: {
0: {
targetAxisIndex: 1,
type: "bars",
color: "#4b71a2",
hAxis: {baselineColor: "none"}
}
},
hAxis: {
baselineColor: "none",
textPosition: "out",
textStyle: {color: "#ddd"},
format: "yyyy.MM.dd"
}
},
minRangeSize: 216e5
}
}
});
dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [rCandlestickChart]);
dashboard.draw(data);
function zoomLastDay () {
$('.chart-filter').removeClass('active');
$('#lastDay').addClass('active');
var range = data.getColumnRange(0);
//console.log('zoomLastDay range: ',range);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
end: range.max
}
});
$.ajax({
url:"<?php echo action('HomeController@getChart')?>",
type:'post',
dataType:'json',
data: {Ajax:1,timeSpan:'1 day',market_id:<?php echo $market_id ?>},
cache:false,
async:true,
success:function(rows){
for(var i=0; i<rows.length; i++){
rows[i][0]=new Date(rows[i][0]);
}
//console.log('zoomLastDay range rows: ',rows);
var data1 = google.visualization.arrayToDataTable(rows, true);
dashboard.draw(data1);
control.draw();
}
});
~~~~~~~~
我是否正在调用chart.validateNow？
如果是这样，那么调用它的正确方法是什么？
编辑：
{{HTML::style('assets/amcharts/style.css')}}
{{ HTML::script('assets/amcharts/amcharts.js') }}
{{ HTML::script('assets/amcharts/serial.js') }}
{{ HTML::script('assets/amcharts/amstock.js') }}
<script type="text/javascript">
var chart;
var defaultLoad=false;
AmCharts.loadJSON=function(timeSpan,buttonClick){
chartData=[];
var timeSpan_ = '6 hour';
//console.log('timeSpan:',timeSpan);
switch(timeSpan){
case "1DD":
timeSpan_ = '1 day';
break;
case "3DD":
timeSpan_ = '3 day';
break;
case "7DD":
timeSpan_ = '7 day';
break;
case "MAX":
timeSpan_ = 'MAX';
break;
default:
timeSpan_ = '6 hour';
}
console.log('timeSpan_:',timeSpan_);
$('.loading').show();
$.ajax({
url:"<?php echo action('HomeController@getChart')?>",
type:'post',
dataType:'json',
data: {Ajax:1,timeSpan:timeSpan_,market_id:<?php echo $market_id ?>},
cache:false,
async:true,
success:function(rows){
console.log('rows: ',rows);
$('.loading').hide();
for(var i=0; i<rows.length; i++){
//console.log('chartData '+i+': ',rows[i]);
var open=parseFloat(rows[i]['open']).toFixed(8);
var close=parseFloat(rows[i]['close']).toFixed(8);
var high=parseFloat(rows[i]['high']).toFixed(8);
var low=parseFloat(rows[i]['low']).toFixed(8);
//console.log('rows '+i+' date: '+rows[i]['date']+' open: '+open+' close: '+close+' high: '+high+' low: '+low);
chartData.push({date:rows[i]['date'],open:open,close:close,high:high,low:low,exchange_volume:rows[i]['exchange_volume']});
}
//console.log('chartData: ',chartData);
//date=rows[rows.length-1]['date'];
//date=new Date(date.replace(" ","T")+'Z');
//var localOffset=date.getTimezoneOffset()*60000;
//date.setTime(date.getTime()+ 600000+ localOffset);
//chartData.push({date:date,open:rows[rows.length-1]['close'],close:rows[rows.length-1]['close'],high:rows[rows.length-1]['close'],low:rows[rows.length-1]['close'],exchange_volume:0});
chart.dataSets[0].dataProvider = chartData;
chart.validateNow(true, false);
if(buttonClick===false){
$('input[value="6 hours"]').click();
}else{
//$('input[value="MAX"]').removeClass('amChartsButtonSelected').addClass('amChartsButton');
$('.amChartsPeriodSelector input[type=button]').removeClass('amChartsButtonSelected').addClass('amChartsButton');
if(timeSpan=='6hh'){
$('input[value="6 hours"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='1DD'){
$('input[value="24 hours"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='3DD'){
$('input[value="3 days"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else if(timeSpan=='7DD'){
$('input[value="1 week"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}else{
$('input[value="MAX"]').removeClass('amChartsButton').addClass('amChartsButtonSelected');
}
}
}
});
};
function buttonClickHandler(data){
console.log('buttonClickHandler:',data);
if(defaultLoad===true){
if(typeof data.count!=='undefined'){AmCharts.loadJSON(data.count+ data.predefinedPeriod,true);
}else{
AmCharts.loadJSON(data.predefinedPeriod,true);
}
}else{
defaultLoad=true;
}
}
AmCharts.ready(function(){AmCharts.loadJSON('6hh',false);
});
function createStockChart(){
chart=new AmCharts.AmStockChart();
chart.pathToImages="/assets/js/amcharts/images/";
var categoryAxesSettings=new AmCharts.CategoryAxesSettings();
categoryAxesSettings.minPeriod="10mm";
categoryAxesSettings.groupToPeriods=["10mm","30mm","hh","3hh","6hh","12hh","DD"];
chart.categoryAxesSettings=categoryAxesSettings;
chart.dataDateFormat="YYYY-MM-DD JJ:NN";
var dataSet=new AmCharts.DataSet();
dataSet.color="#7f8da9";
dataSet.fieldMappings=[
{fromField:"open",toField:"open"},
{fromField:"close",toField:"close"},
{fromField:"high",toField:"high"},
{fromField:"low",toField:"low"},
{fromField:"exchange_volume",toField:"exchange_volume"}
];
dataSet.dataProvider=chartData;
dataSet.categoryField="date";
chart.dataSets=[dataSet];
var stockPanel1=new AmCharts.StockPanel();
stockPanel1.showCategoryAxis=false;
stockPanel1.title="Price";
stockPanel1.percentHeight=70;
stockPanel1.numberFormatter={precision:8,decimalSeparator:'.',thousandsSeparator:','};
var graph1=new AmCharts.StockGraph();
graph1.valueField="value";
graph1.type="candlestick";
graph1.openField="open";
graph1.closeField="close";
graph1.highField="high";
graph1.lowField="low";
graph1.valueField="close";
graph1.lineColor="#6bbf46";
graph1.fillColors="#6bbf46";
graph1.negativeLineColor="#F87A06";//"#db4c3c";
graph1.negativeFillColors="#F87A06";//"#db4c3c";
graph1.fillAlphas=1;
graph1.balloonText="open:<b>[[open]]</b><br>close:<b>[[close]]</b><br>low:<b>[[low]]</b><br>high:<b>[[high]]</b>";
graph1.useDataSetColors=false;
stockPanel1.addStockGraph(graph1);
var stockLegend1=new AmCharts.StockLegend();
stockLegend1.valueTextRegular=" ";
stockLegend1.markerType="none";
stockPanel1.stockLegend=stockLegend1;
var stockPanel2=new AmCharts.StockPanel();
stockPanel2.title="Volume";
stockPanel2.percentHeight=30;
stockPanel2.numberFormatter={precision:3,decimalSeparator:'.',thousandsSeparator:','};
var graph2=new AmCharts.StockGraph();
graph2.valueField="exchange_volume";
graph2.type="column";
graph2.cornerRadiusTop=2;
graph2.fillAlphas=1;
graph2.periodValue="Sum";
stockPanel2.addStockGraph(graph2);
var stockLegend2=new AmCharts.StockLegend();
stockLegend2.valueTextRegular=" ";
stockLegend2.markerType="none";
stockPanel2.stockLegend=stockLegend2;
chart.panels=[stockPanel1,stockPanel2];
var cursorSettings=new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled=true;
cursorSettings.fullWidth=true;
cursorSettings.cursorAlpha=0.1;
chart.chartCursorSettings=cursorSettings;
var periodSelector=new AmCharts.PeriodSelector();
periodSelector.position="top";
periodSelector.dateFormat="YYYY-MM-DD JJ:NN";
periodSelector.inputFieldWidth=150;
periodSelector.inputFieldsEnabled=false;
periodSelector.hideOutOfScopePeriods=false;
periodSelector.periods=[
{period:"hh",count:6,label:"6 hours",selected:true},
{period:"DD",count:1,label:"24 hours"},
{period:"DD",count:3,label:"3 days"},
{period:"DD",count:7,label:"1 week"},
{period:"MAX",label:"MAX"}
];
periodSelector.addListener('changed',function(period){buttonClickHandler(period);});
chart.periodSelector=periodSelector;
var panelsSettings=new AmCharts.PanelsSettings();
panelsSettings.usePrefixes=false;
chart.panelsSettings=panelsSettings;
var valueAxis=new AmCharts.ValueAxis();
valueAxis.precision=8;
chart.valueAxis=valueAxis;
chart.chartScrollbarSettings.enabled=false;
chart.write('chartdiv');
}
function use_price(type, price, total_amount){
// var pre = 'b_';
// if(type==2) pre = 's_';
// $('#'+pre+'price').val(price.toFixed(8));
// $('#'+pre+'amount').val(total_amount.toFixed(8));
$('#s_price').val(price.toFixed(8));
$('#s_amount').val(total_amount.toFixed(8));
$('#b_price').val(price.toFixed(8));
$('#b_amount').val(total_amount.toFixed(8));
updateDataSell();
updateDataBuy();
}
</script>
@stop
我已将代码更新为此内容，但它仍未使用新数据更新图表。
答案 0 :(得分：1)
您的代码存在一些问题：
1）每次更新图表时都不要重新创建图表。您只需拨打一次loadJSON即可。多次调用会消耗资源，因为它会创建另一个图表实例，并且每个实例都会尝试在同一个div中相互否决，因此您需要将其从chart.dataProvider = chartData;方法中删除。
2）与其他图表类型不同，股票图表的dataProvider存储在数据集对象中。您需要chart.dataSets[0].dataProivder = chartData;，而不是validateData()，因为您只有一个数据集。
3）validateNow()更适合数据更新，而validateData()通常用于视觉更改。有时调用两者都是必要的，但前者通常可以处理这两种情况而不需要任何额外的标志。切换为zoomOut或致电validateNow(true, false)会重新绘制您的更改图表，前提是您正确设置了dataProvider（请参阅＃2）。
修改 - Fiddle。添加了{{1}}以防止数据在较小的时段内放大太多。