0

好吧,这已经有一段时间了,所以我想也许是时候寻求帮助了!

我一直在考虑放入一些 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,但会先看看是否有人能理解我想要的东西!

谢谢阅读。

4

2 回答 2

1

您可以使用destroy()函数并删除旧图表,然后使用相同的选项创建新项目:

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

于 2013-05-28T13:31:36.180 回答
0

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

据我所知,CSS 会立即应用,所以我猜你的 CSS 有问题。

如果我弄错了,您总是可以将选择存储在上面示例中的 cookie 中并重新加载文档?

于 2013-05-27T20:16:46.363 回答