点击按钮如何调用酒吧聊天功能

Question

Here i am using bhar chat onloading it is working , my question is onclick the button also i want to call the same function , from this code where they are calling the function i am not able to get, if any one know means update my snippet.which purpose i am asking means clicking button that time i will pass the AJAX and again i will display the results

 $(function () { Highcharts.setOptions({ colors: ['#67BCE6'], chart: { style: { fontFamily: 'sans-serif', color: '#fff' } } }); $('#barchat').highcharts({ chart: { type: 'column', backgroundColor: '#36394B' }, title: { text: 'Trip Details', style: { color: '#fff' } }, xAxis: { tickWidth: 0, labels: { style: { color: '#fff', } }, categories: ['Project', 'Escort', 'Adhoc'] }, yAxis: { gridLineWidth: .5, gridLineDashStyle: 'dash', gridLineColor: 'black', title: { text: '', style: { color: '#fff' } }, labels: { formatter: function() { return '$'+Highcharts.numberFormat(this.value, 0, '', ','); }, style: { color: '#fff', } } }, legend: { enabled: false, }, credits: { enabled: false }, tooltip: { //valuePrefix: '$' }, plotOptions: { column: { borderRadius: 2, pointPadding: 0, groupPadding: 0.1 } }, series: [{ name: 'No of trip used', data: [1000, 2000, 2300] }] }); }); 

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Barchat --> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="barchat" style="width:100%; height:320px;"></div> <button id="clickMeBtn">CLick Me</button> 

Answer 1

If I understood your question correctly, you're trying to reload the chart when the button is clicked. If so, please try this code:

 $(function () { displayChart(['Project', 'Escort', 'Adhoc'],[1000, 2000, 2300]); }); $('button#clickMeBtn').on('click',function(){ displayChart(['Project', 'Escort', 'Adhoc'],[3000, 2000, 2300]); }); function displayChart(aCategories,aData){ Highcharts.setOptions({ colors: ['#67BCE6'], chart: { style: { fontFamily: 'sans-serif', color: '#fff' } } }); $('#barchat').highcharts({ chart: { type: 'column', backgroundColor: '#36394B' }, title: { text: 'Trip Details', style: { color: '#fff' } }, xAxis: { tickWidth: 0, labels: { style: { color: '#fff' } }, categories: aCategories }, yAxis: { gridLineWidth: .5, gridLineDashStyle: 'dash', gridLineColor: 'black', title: { text: '', style: { color: '#fff' } }, labels: { formatter: function() { return '$'+Highcharts.numberFormat(this.value, 0, '', ','); }, style: { color: '#fff', } } }, legend: { enabled: false, }, credits: { enabled: false }, tooltip: { //valuePrefix: '$' }, plotOptions: { column: { borderRadius: 2, pointPadding: 0, groupPadding: 0.1 } }, series: [{ name: 'No of trip used', data: aData }] }); } 

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Barchat --> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="barchat" style="width:100%; height:320px;"></div> <button id="clickMeBtn">CLick Me</button> 

Answer 2

Create separate function for chat and pass new value in button click like below snippet in AJAX call.

 $(function() { var data = [1000, 2000, 2300]; chart(data); $("#clickMeBtn").on("click", function() { //call AJAX and set new data and call chart function again. data = [2000, 1000, 2500] // New data chart(data); }); }); function chart(data) { Highcharts.setOptions({ colors: ['#67BCE6'], chart: { style: { fontFamily: 'sans-serif', color: '#fff' } } }); $('#barchat').highcharts({ chart: { type: 'column', backgroundColor: '#36394B' }, title: { text: 'Trip Details', style: { color: '#fff' } }, xAxis: { tickWidth: 0, labels: { style: { color: '#fff', } }, categories: ['Project', 'Escort', 'Adhoc'] }, yAxis: { gridLineWidth: .5, gridLineDashStyle: 'dash', gridLineColor: 'black', title: { text: '', style: { color: '#fff' } }, labels: { formatter: function() { return '$' + Highcharts.numberFormat(this.value, 0, '', ','); }, style: { color: '#fff', } } }, legend: { enabled: false, }, credits: { enabled: false }, tooltip: { //valuePrefix: '$' }, plotOptions: { column: { borderRadius: 2, pointPadding: 0, groupPadding: 0.1 } }, series: [{ name: 'No of trip used', data: data }] }); } 

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Barchat --> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="barchat" style="width:100%; height:320px;"></div> <button id="clickMeBtn">CLick Me</button>