向每个堆叠条形图项目添加链接
Adding a link to each stacked bar chart item
我有一个堆叠的条形图,我正试图使图表中的每一项都根据单击的内容打开sharepoint视图。
我正在这里构建数据
seriesData.push({ name: xStatus[i], data: dataArray, url: countArray[i].url });
我的图表代码如下:
loadStackedBarChartWithLink = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
//Build Stacked Bar Chart
$(divId).highcharts({
chart: {
type: 'bar'
},
credits: {
enabled: false
},
title: {
text: chartTitle
},
xAxis: {
categories: xCategories,
allowDecimals: false
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: yAxisTitle
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
location.href = this.options.url;
}
}
}
}
},
series: seriesData
});
}
图表有正确的数据,指针是正确的,但我得到了url的"未定义"。
非常感谢您的帮助。
IWSChartBuilder.PersonEngagementsByStatusChart = function () {
var load = function () {
$.when(
IWSChartBuilder.RESTQuery.execute(GET THE DATA HERE)
).done(
function (engagements1) {
var data = [];
var countArray = [];
var urls = [];
var results = engagements1.d.results;
for (var i = 0; i < results.length; i++) {
if (results[i].Consultant.Title == undefined) {
continue;
}
var found = false;
for (var j = 0; j < data.length; j++) {
if (data[j].personName == results[i].Consultant.Title && data[j].statusName == results[i].Engagement_x0020_Status) {
data[j].statusCount = data[j].statusCount + 1;
found = true;
}
}
if (!found) {
data.push(new IWSChartBuilder.StatusByPerson(results[i].Consultant.Title, results[i].Engagement_x0020_Status, 1));
}
}
//Put data into format for stacked bar chart
var seriesData = [];
var xCategories = [];
var xStatus = [];
var i, j, cat, stat;
//Get Categories (Person Name)
for (i = 0; i < data.length; i++) {
cat = data[i].personName;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
//Get Status values
for (i = 0; i < data.length; i++) {
stat = data[i].statusName;
if (xStatus.indexOf(stat) === -1) {
xStatus[xStatus.length] = stat;
}
}
//Create initial series data with 0 values
for (i = 0; i < xStatus.length; i++) {
var dataArray = [];
for (j = 0; j < xCategories.length; j++) {
dataArray.push(0);
}
seriesData.push({ name: xStatus[i], data: dataArray });
}
//Cycle through data to assign counts to the proper location in the series data
for (i = 0; i < data.length; i++) {
var personIndex = xCategories.indexOf(data[i].personName);
for (j = 0; j < seriesData.length; j++) {
if(seriesData[j].name == data[i].statusName){
seriesData[j].data[personIndex] = data[i].statusCount;
break;
}
}
}
//Build Chart
IWSChartBuilder.Utilities.loadStackedBarChartWithLink(xCategories, seriesData, "#engagementsByStatusChart", "Engagements by Status", "Total Projects");
}
).fail(
function (engagements1) {
$("#engagementsByStatusChart").html("<strong>An error has occurred.</strong>");
}
);
};
return {
load: load
}
}();
我现在尝试的方式
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
getURL(this, xCategories, seriesData);
}
}
}
}
},
function getURL(chartInfo, xCategories, seriesData) {
var baseUrl = "correctURL" + xCategories[chartInfo._i] + "-FilterField2%3DEngagement%255Fx0020% 255FStatus-FilterValue2%3D" + chartInfo.name;
location.href = baseUrl;
}
您正在挂接点击事件处理程序。在此处理程序中,"this"指的是点,而不是序列。
试试这个:
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
events: {
click: function () {
location.href = this.options.url;
}
}
}
},
http://jsfiddle.net/2DG84/
如果您需要依赖于点值和序列的URL,您可以同时访问这两个。例如
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
alert(this.series.options.url + "&y=" + this.y);
}
}
}
}
},
在这个例子中,有一个关于这个系列的基本URL,我用point.y值添加到UTL中。
http://jsfiddle.net/Fygg2/
相关文章:
- 使用方法将扫描的项目添加到总数中
- 如何将项目添加到Highcharts图例中
- 如何将多个项目添加到列表中
- 将项目添加到动态列表
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- Yeoman/Grunt:向项目添加子目录
- 将项目添加到篮式过滤器与Splice ReactJS Javascript
- 通过Jquery将项目添加到HTML Select
- 向每个堆叠条形图项目添加链接
- 微风:将项目添加到复杂类型的数组中
- 运行并向nodejs项目添加单元测试
- React Redux将项目添加到列表中会转移到其他创建的列表中
- 谷歌表单:将项目添加到响应中
- react.js每n个项目添加一个开始标签或结束标签
- jquery appendTo将多个项目添加到一个容器中
- Javascript window.open() 多次将项目添加到购物车
- 在 ReactJs 状态上将项目添加到数组中,并超时以进行自我删除
- 如何将项目添加到选定的追加列表 jQuery
- 动态将项目添加到精彩弹出库
- 无论如何可以将项目添加到 DOM 中的现有列表中