好吧,这已经有一段时间了,所以我想也许是时候寻求帮助了!
我一直在考虑放入一些 Highcharts 图表(http://www.highcharts.com/demo/column-basic/gray)。非常酷的图表,但我想看看是否可以解决特定问题。
我正在运行一个 ASP.Net 网络表单站点,在这个站点上我有一个 CSS 切换器,它允许最终用户单击链接来更改页面上的 CSS 主题,基本上是浅色或深色。
这是通过 HTML 中的菜单完成的:
<ul id="nav">
<%--parameter" doesn't do anything but it forces an update of the CSS each time it's called--%>
<li><a href="#" rel="/Styles/lightside.css?parameter=1">Lightside</a></li>
<li><a href="#" rel="/Styles/Darkside.css?parameter=1">Darkside</a></li>
</ul>
还有一个文档就绪的 Javascript 函数:
// CSS Switcher
// Stores CSS Selection in a Cookie object using JQuery cookie plugin
// http://plugins.jquery.com/cookie/
$("#nav li a").click(function () {
$(".switch[rel='stylesheet']").attr('href', $(this).attr('rel'));
$.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' });
return false;
});
这会在 lightside.css 和 darkside.css 之间切换 css 文件。效果很好,并且可以立即应用。我想看看是否可以在 CSS 主题切换时在 Highcharts 上应用主题更改。
我阅读并找到了这个页面:http ://www.highslide.com/forum/viewtopic.php?f=9&t=5586 - 它让我更好地了解如何更改主题。
最终我遇到的问题是,每次切换 CSS 样式表时,我都找不到重绘图表的方法,因为绘制图表的代码是 Document Ready 函数本身的一部分,我看不到一种在顶部重新应用我的风格的方法。
绘制图表的代码是这样的,例如:
var table = $('table#MainContent_GridViewUserNumbersDaily');
var skipheader = true;
// Retrieve Values into an object called ChartTable
var ChartTable = $('tbody tr', table).map(function () {
var $row = $(this);
return {
'Date': $row.find(':nth-child(1)').text(),
'User2007': $row.find(':nth-child(2)').text(),
'User2007Diff': $row.find(':nth-child(3)').text(),
'User2010': $row.find(':nth-child(4)').text(),
'User2010Diff': $row.find(':nth-child(5)').text(),
'User2013': $row.find(':nth-child(6)').text(),
'User2013Diff': $row.find(':nth-child(7)').text(),
'UserTotal': $row.find(':nth-child(10)').text(),
'UserTotalDiff': $row.find(':nth-child(11)').text(),
};
}).get();
//// All User Numbers Chart ////
var newArray = [];
// Loop through all the rows in ChartTable
for (var i = 0; i < ChartTable.length; i++) {
// Vars
var xData, yData, object;
object = ChartTable[i];
// Parse Data
xData = parseDateTime(object["Date"]);
yData = parseFloat(object["UserTotal"]);
// Append to Array
if (skipheader = true) {
if (i != 0) {
newArray.push([xData, yData]);
}
}
else {
newArray.push([xData, yData]);
}
};
$('#chartUserNumbersTotal_div').highcharts({
chart: {
defaultSeriesType: 'line'
},
xAxis: {
type: 'datetime',
minorTickInterval: (24 * 3600 * 1000) * 7, // 1 Week
},
series: [{
name: 'All Useres',
data: newArray,
marker: {
enabled: false
}
}],
yAxis: {
title: {
text: 'Useres'
}
},
title: {
text: 'All Useres'
},
legend: {
enabled: false
}
});
如果有帮助,我可能会敲出所有这些的 JSFiddle,但会先看看是否有人能理解我想要的东西!
谢谢阅读。