Javascript 更改CSS主题时切换Highcharts主题

好了，我的头撞在墙上已经有一段时间了，所以我想也许是时候寻求帮助了

我一直在看一些高图表（）。非常酷的图表，但我想看看我是否能解决一个特定的问题

我正在运行一个ASP.NETWebForms网站，在这个网站上我有一个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>

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

我读了一本书，发现了这一页：-它让我对如何改变主题有了更好的想法

最终，我遇到的问题是，每次切换CSS样式表时，我都找不到重新绘制图表的方法，因为绘制图表的代码是文档就绪函数本身的一部分，而且我看不到一种方法可以在顶部重新应用我的样式

绘制图表的代码如下所示，例如：

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
    }
}); 

var table=$（'table#MainContent_GridViewUserNumbersDaily'）；
var skipheader=true；
//将值检索到名为ChartTable的对象中
var ChartTable=$（'tbody tr'，table）.map（函数（）{
var$row=$（此）；
返回{
'Date'：$row.find（'：第n个子项（1）'）。text（），
'User2007'：$row.find（'：第n个子项（2）'）.text（），
'User2007Diff'：$row.find（'：第n个子项（3）'）.text（），
'User2010'：$row.find（'：第n个子项（4）'）.text（），
'User2010Diff'：$row.find（'：第n个子项（5）'）.text（），
'User2013'：$row.find（'：第n个子项（6）'）.text（），
'User2013Diff'：$row.find（'：第n个子项（7）'）.text（），
'UserTotal'：$row.find（'：第n个子项（10）'）。text（），
'UserTotalDiff'：$row.find（'：第n个子项（11）'）.text（），
};
}).get（）；
////所有用户号码表////
var newArray=[]；
//循环浏览图表表中的所有行
对于（var i=0；i

如果有帮助的话，我也许可以把所有这些都翻一翻，但我会看看是否有人能理解我首先想要的是什么

谢谢你的阅读

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

据我所知，CSS是即时应用的，所以我猜你的CSS有问题

如果我错了，您可以像上面的示例一样将选择存储在cookie中并重新加载文档？

您可以使用

destroy（）

函数删除旧图表，然后使用相同的选项创建新项目：

---

使用

redraw

函数在需要时进行重画。我确实查看了redraw，但没有找到任何方法添加该函数来全局重画图表，或指定要重画的图表，因此对我帮助不大。嗨，Jonathan，CSS会立即切换，但Highcharts是在Javascript准备好文档时绘制的，并不是CSS用来控制颜色（而是Javascript设置），所以图表不会随着其他颜色的变化而变化。希望这有意义？图表使用内联样式？你可以覆盖那些！在CSS中很重要。像这样：div{background:red！important；}感谢您花时间回答，我认为他们目前不支持真正的CSS，请参阅。真是太遗憾了，因为这会让我的生活轻松一点！这看起来确实更有希望。我会有一个关于它的剧本，但可能要到下周才能开始！

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
    }
});