图表在悬停时改变间隔？
使用Chartjs和bootstrap4。从ajax调用获取数据。
页面加载后，我加载图表。我对此图表没有任何问题。
要更改图表的频率，我有一排按钮。我使用单击按钮，获取该按钮的ID，然后在按钮内单击使用switch语句匹配ID并启动相应的ajax调用以获取所需数据并将其打印到图形中。
在大多数情况下，这是有效的。但是，在我点击下面一行中的按钮后，我将鼠标悬停在图表上时，图表将在悬停时更改频率。我不知道是什么原因引起的。
$("button[name='graphBTN']" ).on('click', function(){
console.log("You entered: " + this.id);
switch(this.id) {
case '1DChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/1d",
method: 'GET',
success: function(data) {
console.log(data)
var minute = [];
var price = [];
for (var i = 0; i < data.length; i++) {
minute.push(data[i].minute);
price.push(data[i].low);
}
$('#graphName').html("1 day graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var oneDayChart = new Chart(chart, {
type: 'line',
data: {
labels: minute,
datasets: [
{
data: price,
label: 'Average Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '1MChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/1m",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("1 month graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var oneMonthChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '3MChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/3m",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("3 month graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var threeMonthChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '6MChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/6m",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("6 month graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var sixMonthChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case 'YTDChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/ytd",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("YTD graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var ytdChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '1YChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/1y",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("1 year graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var oneYearChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBorderColor: 'white',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '2YChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/2y",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("2 year graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var twoYearChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
case '5YChartBTN':
$.ajax({
url: "https://api.iextrading.com/1.0/stock/" + searchTerm + "/chart/5y",
method: 'GET',
success: function(data) {
console.log(data)
var dates = [];
var close = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].date);
close.push(data[i].close);
}
$('#graphName').html("5 year graph of " + searchTerm.toUpperCase());
var chart = $('#chart');
Chart.defaults.global.defaultFontColor = 'white';
Chart.defaults.global.defaultFontFamily = 'Raleway';
var fiveYRChart = new Chart(chart, {
type: 'line',
data: {
labels: dates,
datasets: [
{
data: close,
label: 'Close Price',
borderColor: "#3e95cd",
pointRadius: '1',
pointBackgroundColor: 'red'
},
],
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}],
xAxes: [{
gridLines: {
color: 'rgb(84, 84, 84)'
}
}]
}
}
});
},
error: function(error) {
console.log("Error!" + error);
}
});
break;
}
});
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？