Question

好的，到现在为止，我已经把头撞到了墙上一段时间，所以想想也许是时候寻求帮助了！

我一直在寻找一些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>

一个Document ready 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，但是会看看是否有人能够理解我想要的东西！

感谢阅读。

Answer 1

您可以使用destroy()功能删除旧图表，然后使用相同选项创建新项目：

http://jsfiddle.net/LL75c/1/

Answer 2

这会在lightside.css和darkside.css之间切换css文件。这很好，并立即应用。我想看看当CSS主题切换时是否可以在Highcharts上应用主题更改。

据我所知，CSS会立即应用，所以我的猜测是你的CSS出了问题。

如果我弄错了，您可以随时将选项存储在上述示例中的Cookie中并重新加载文档吗？

更改CSS主题时切换Highcharts主题

2 个答案: