Highcharts - 获取点击事件的图表
Highcharts - Getting chart on click event
我需要在单个页面中创建 9 个具有相同选项的饼图,我使用以下函数来创建它们:
function newChart(series_id, div_name) {
this.chart = {
height: 450,
marginBottom: 70
},
this.title = {
floating: true
},
this.subtitle = {
floating: true
},
this.legend = pie_legend,
this.tooltip = tooltip_,
this.plotOptions = {
pie: {
showInLegend: true,
size: '100%',
borderWidth: 2,
borderColor: 'black',
point: {
events: {
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function () {
setTranslation(this, true);
},
click: function () {
var drilldown = this.drilldown;
if (isNumber(drilldown))
{
chart3.series[0] = chart3.drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, chart3);
$(window).scrollTop(tempScrollTop);
});
});
chart3.colors = chart_colors;
}
else {
chart3.series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, chart3);
$(window).scrollTop(tempScrollTop);
});
});
chart3.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
}
},
dataLabels: {
enabled: false
}
},
series: {
dataLabels: {
style: {
fontWeight: 'bold',
fontSize: '16px'
}
}
}
},
this.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"],
this.series = [],
this.drilldown = {
series: []
}
}
;
在单击事件中,我想使用我正在创建的同一对象来创建函数。但是我找不到让它动态的方法,如果我手动更改 chartX 的 chart3,它们将单独正确创建并正常工作。我的问题是如何在点击函数中获取图表对象,我不能使用 'this' 因为在那个范围内它正在检索图表中的一个点(在这种情况下是饼图的一部分)。所以我想得到类似的东西:
click: function () {
var drilldown = this.drilldown;
if (isNumber(drilldown))
{
thisChart.series[0] = thisChart.drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, thisChart);
$(window).scrollTop(tempScrollTop);
});
});
thisChart.colors = chart_colors;
}
else {
thisChart.series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, thisChart);
$(window).scrollTop(tempScrollTop);
});
});
thisChart.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
我读到绑定函数可能会有帮助,但我不知道该怎么做,我也尝试传递相同的对象作为函数的参数,但它不起作用,并尝试将其用作要在函数中作为对象传递的字符串变量,但它不被视为对象或它给我错误。
我对 Javascript 完全陌生(大概有 3-4 周的经验),所以请多多包涵。我可以为每个图表创建一个独立的图表对象,重复代码 9 次,并将 chart3 部分更改为 chart1、chart2 等,它可以工作,但我想让它更简单。
不知何故问问题可以帮助我想出答案,阅读有关括号表示法我想出了以下内容:
click: function () {
var drilldown = this.drilldown;
var chartName = name;
if (isNumber(drilldown))
{
window[chartName].series[0] = window[chartName].drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, window[chartName]);
$(window).scrollTop(tempScrollTop);
});
});
window[chartName].colors = chart_colors;
}
else {
window[chartName].series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, window[chartName]);
$(window).scrollTop(tempScrollTop);
});
});
window[chartName].colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
我在创建新图表时传递名称:
chart1 = new newChart(series1,"chart-pie1","chart1");
chart2 = new newChart(series2,"chart-pie2","chart2")
chart3 = new newChart(series3,"chart-pie3","chart3");
它现在按照我希望的方式工作。无论如何,我很感激有关代码最小化的建议。我知道我的代码非常重复,我只是在学习 javascript 所以我的编码不是很有效或不够简单。
我需要在单个页面中创建 9 个具有相同选项的饼图,我使用以下函数来创建它们:
function newChart(series_id, div_name) {
this.chart = {
height: 450,
marginBottom: 70
},
this.title = {
floating: true
},
this.subtitle = {
floating: true
},
this.legend = pie_legend,
this.tooltip = tooltip_,
this.plotOptions = {
pie: {
showInLegend: true,
size: '100%',
borderWidth: 2,
borderColor: 'black',
point: {
events: {
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function () {
setTranslation(this, true);
},
click: function () {
var drilldown = this.drilldown;
if (isNumber(drilldown))
{
chart3.series[0] = chart3.drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, chart3);
$(window).scrollTop(tempScrollTop);
});
});
chart3.colors = chart_colors;
}
else {
chart3.series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, chart3);
$(window).scrollTop(tempScrollTop);
});
});
chart3.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
}
},
dataLabels: {
enabled: false
}
},
series: {
dataLabels: {
style: {
fontWeight: 'bold',
fontSize: '16px'
}
}
}
},
this.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"],
this.series = [],
this.drilldown = {
series: []
}
}
;
在单击事件中,我想使用我正在创建的同一对象来创建函数。但是我找不到让它动态的方法,如果我手动更改 chartX 的 chart3,它们将单独正确创建并正常工作。我的问题是如何在点击函数中获取图表对象,我不能使用 'this' 因为在那个范围内它正在检索图表中的一个点(在这种情况下是饼图的一部分)。所以我想得到类似的东西:
click: function () {
var drilldown = this.drilldown;
if (isNumber(drilldown))
{
thisChart.series[0] = thisChart.drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, thisChart);
$(window).scrollTop(tempScrollTop);
});
});
thisChart.colors = chart_colors;
}
else {
thisChart.series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, thisChart);
$(window).scrollTop(tempScrollTop);
});
});
thisChart.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
我读到绑定函数可能会有帮助,但我不知道该怎么做,我也尝试传递相同的对象作为函数的参数,但它不起作用,并尝试将其用作要在函数中作为对象传递的字符串变量,但它不被视为对象或它给我错误。
我对 Javascript 完全陌生(大概有 3-4 周的经验),所以请多多包涵。我可以为每个图表创建一个独立的图表对象,重复代码 9 次,并将 chart3 部分更改为 chart1、chart2 等,它可以工作,但我想让它更简单。
不知何故问问题可以帮助我想出答案,阅读有关括号表示法我想出了以下内容:
click: function () {
var drilldown = this.drilldown;
var chartName = name;
if (isNumber(drilldown))
{
window[chartName].series[0] = window[chartName].drilldown.series[drilldown];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, window[chartName]);
$(window).scrollTop(tempScrollTop);
});
});
window[chartName].colors = chart_colors;
}
else {
window[chartName].series[0] = series_id.series[0];
require(['jquery', 'charts'], function ($, charts) {
$(function () {
var tempScrollTop = $(window).scrollTop();
charts.pie(div_name, window[chartName]);
$(window).scrollTop(tempScrollTop);
});
});
window[chartName].colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"];
}
}
我在创建新图表时传递名称:
chart1 = new newChart(series1,"chart-pie1","chart1");
chart2 = new newChart(series2,"chart-pie2","chart2")
chart3 = new newChart(series3,"chart-pie3","chart3");
它现在按照我希望的方式工作。无论如何,我很感激有关代码最小化的建议。我知道我的代码非常重复,我只是在学习 javascript 所以我的编码不是很有效或不够简单。