条形图插件 - 使每个栏可单击（diffrenet链接为每个） [英] Bar Chart plugin - make the each bar clickable (diffrenet link for each )
本文介绍了条形图插件 - 使每个栏可单击（diffrenet链接为每个）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用过插件
http://www.jqueryscript.net/demo/Simple-Bar-Chart-Plugin-with-jQuery-Bootstrap-jchart/
但问题是，我不能酒吧可点击。
我的moto是使每个栏链接，如果用户点击它将重定向用户在新的链接。
但我不能这样做，我已经尝试，但能够给每个酒吧只有单一的URL。
请帮助我在html页面上的
代码：
i have used a plugin http://www.jqueryscript.net/demo/Simple-Bar-Chart-Plugin-with-jQuery-Bootstrap-jchart/ but the problem is that ,I am not able to make the bars clickable . My moto is to make each bar link and if user click on that it will redirect user on new link . but i am not able to do it ,i have tried but able to give only single url for each bar . Please help me code on html page :
<div id="bar_of_pies" data-sort="true" data-width="300" class="jChart chart-sm" name="">
<div class="define-chart-row " data-color="#dfdfdf" title="1">13</div>
<div class="define-chart-row" data-color="#F4BE44" title="2">22</div>
<div class="define-chart-row" data-color="#dfdfdf" title="3">20</div>
<div class="define-chart-row" data-color="#F4BE44" title="4">18</div>
<div class="define-chart-row" data-color="#dfdfdf" title="5">16</div>
<div class="define-chart-row" data-color="#F4BE44" title="6">14</div>
<div class="define-chart-row" data-color="#dfdfdf" title="5">12</div>
<div class="define-chart-row" data-color="#F4BE44" title="6">10</div>
<div class="define-chart-footer">10</div>
<div class="define-chart-footer">20</div>
<div class="define-chart-footer">30</div>
</div>
js至有效图表：
$(document).ready(function () {
$("#bar_of_pies").jChart({
sort: false,
x_label:'Hello',
});
})
});
推荐答案
我已经分叉你的小提琴，并在这里更新：
http://jsfiddle.net/5ryEZ/5/
I have forked your fiddle and updated it here: http://jsfiddle.net/5ryEZ/5/
更改：
此插件必须进行编辑才能正常工作。我将整个插件复制到document.ready（）并进行了更改。
Changes: The plugin had to be edited for this to work. I copied the entire plugin into document.ready() and made the changes.
<div class="define-chart-row" data-clicker="http://google.com" data-color="#009182" title="1">13</div>
document.ready的代码出现在底部。
对于网址，在divs中添加data-clicker属性。
Your code for document.ready is present at the bottom. For urls, add "data-clicker" attribute to the divs.
/* replace this code in the jChart.js */
$.fn.jChart = function (options) {
var selector = $(this);
var default_color = "#6b9bd6";
var bar_height = 19;
var settings = $.extend({
width: 750,
clicker: "http://wditot.in",
name: null,
type: "bar",
headers: null,
values: null,
footers: Array(),
sort: false,
sort_colors: false,
colors: Array(),
x_label: null
}, options);
//Initialize some settings that can be set via HTML
if (settings.name == null) {
settings.name = $(this).attr("name");
}
if ($(this).data("sort") == true) {
settings.sort = true;
}
if ($(this).data("width") != null) {
settings.width = parseInt($(this).data("width"));
}
if ($(this).data("x_label") != null) {
settings.x_label = $(this).data("x_label");
}
if ($(this).data("clicker") != null) {
settings.clicker = $(this).data("clicker");
}
var chart_width = settings.width;
if ($(this).hasClass("chart-sm")) {
bar_height = 17;
} else if ($(this).hasClass("chart-lg")) {
bar_height = 25;
} else if (settings.width != null) {
chart_width = parseInt(settings.width);
}
checkForHTMLSettings();
//Clear the data in the jChart div
$(this).html("");
//Create the html containers for the chart
var chart_title = $("<div>", {
class: "chart-title",
html: settings.name
});
var legend_left = $("<div>", {
class: "legend legend-left"
});
var x_label = $("<span>", {
class: "chart-x-label",
html: settings.x_label
});
//Calculate what the chart width should be
var max_data = Math.max.apply(Math, settings.values);
var max_footer = Math.max.apply(Math, settings.footers);
var maxes = [max_data, max_footer];
var chart_max = Math.max.apply(Math, maxes);
var container_width = chart_width + 250;
var chart_container = $("<div>", {
class: "chart-container",
width: container_width + "px"
});
var chart = $("<div>", {
class: "chart",
width: chart_width + "px"
});
var legend_bottom = $("<div>", {
class: "legend-bottom"
});
//Place the containers into the target element
$(this).append(chart_container);
chart_container.append(chart_title);
chart_container.append(legend_left);
chart_container.append(chart);
//Sort the data if the setting is enabled (Insertion sort)
if (settings.sort) {
for (var i = 1; i < settings.values.length; i++) {
var j = i;
while (j > 0 && settings.values[j - 1] < settings.values[j]) {
var temp = settings.values[j];
var head_temp = settings.headers[j];
settings.values[j] = settings.values[j - 1];
settings.values[j - 1] = temp;
//Sort headings
settings.headers[j] = settings.headers[j - 1];
settings.headers[j - 1] = head_temp;
//Sort colors
if (settings.sort_colors) {
var color_temp = settings.colors[j];
settings.colors[j] = settings.colors[j - 1];
settings.colors[j - 1] = color_temp;
}
j--;
}
}
}
//Loop through headings and create/place them and their corresponding value bars
for (var i = 0; i < settings.headers.length; i++) {
var heading = $("<div>", {
class: "heading heading-left",
style: "height: " + bar_height + "px;font-size: 10pt;",
html: settings.headers[i]
});
var bar_width = (settings.values[i] / chart_max) * chart_width;
var bar = $("<div>", {
class: "bar",
"data-placement": "right",
"data-toggle": "tooltip",
title: commaSeparateNumber(settings.values[i]),
style: "height:" + bar_height + "px;background-color:" + settings.colors[i % settings.colors.length],
width: bar_width,
onclick: settings.clicker[i]
});
legend_left.append(heading);
chart.append(bar);
}
chart.append(legend_bottom);
for (var i = 0; i < settings.footers.length; i++) {
var margin = "margin-left:" + ((settings.footers[i] / chart_max) * chart_width - 9).toString() + "px;";
var chart_label_bottom = $("<div>", {
class: "chart-label chart-label-bottom",
style: margin,
html: commaSeparateNumber(settings.footers[i])
});
var margin = "margin-left:" + ((settings.footers[i] / chart_max) * chart_width - 2).toString() + "px;";
var chart_label_hr = $("<div>", {
class: "chart-label-hr",
style: margin
});
legend_bottom.append(chart_label_bottom);
chart.append(chart_label_hr);
legend_bottom.append(x_label);
}
//Enable hover details
$(".bar").tooltip();
return this;
/**
* Checks for settings defined in the HTML
* like chart-define-row and chart-define-footer classes
*/
function checkForHTMLSettings() {
//Check for HTML defined bar chart data
if (selector.find(".define-chart-row").length > 0) {
settings.headers = Array();
settings.values = Array();
settings.clicker = Array();
selector.find(".define-chart-row").each(function () {
settings.headers.push($(this).attr("title"));
var value = $(this).html();
if (value == null || value == "") {
settings.values.push(0);
} else {
settings.values.push(parseInt(value));
}
var color = $(this).data("color");
var clicker = $(this).data("clicker"); {
if (clicker == null || clicker == "") {
settings.clicker.push('#');
} else {
settings.clicker.push(clicker);
}
}
if (color != null) {
settings.sort_colors = true;
settings.colors.push(color);
} else {
settings.colors.push(default_color);
}
});
} else {
settings.colors.push(default_color);
}
//Check for HTML defined footers
if (selector.find(".define-chart-footer").length > 0) {
settings.footers = Array();
selector.find(".define-chart-footer").each(function () {
var footer = $(this).html();
if (footer != null && footer != "") {
settings.footers.push(parseInt(footer));
}
});
}
}
/**
* Converts a number into a comma separated string
*/
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val;
}
};
/* End of code to be copied into jChart.js */
这篇关于条形图插件 - 使每个栏可单击（diffrenet链接为每个）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
