0
好的，這裏一直在我的頭上撞牆，所以想想現在是時候尋求幫助了！當CSS主題發生變化時切換Highcharts主題
我一直在考慮放入一些Highcharts圖表（http://www.highcharts.com/demo/column-basic/gray）。非常酷的圖表，但我想看看我是否可以解決一個特定的問題。
我正在運行一個ASP.Net webforms網站，在這個網站上我有一個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如果有幫助，但會看看是否有人能明白我想先！
感謝您的閱讀。
使用'redraw'函數來重繪時，你想要的。 –
我確實看過重繪，但看不到任何添加該函數的方式來全局重繪圖表，或指定要重繪的圖表，所以沒有太多的幫助。 – HungryHippos