0

よし、これでしばらく壁に頭をぶつけていたので、助けを求める時が来たのかもしれないと思った!

いくつかのハイチャート チャート ( 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;
});

これにより、css ファイルが lightside.css と darkside.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

0

これにより、css ファイルが lightside.css と darkside.css の間で切り替わります。それはうまく機能し、すぐに適用されます。CSS テーマが切り替わったときに、Highcharts にもテーマの変更を適用できるかどうかを確認したかったのです。

私の知る限り、CSS は即座に適用されるので、CSS に問題があると思います。

私が間違っている場合は、上記の例のようにいつでも選択を Cookie に保存して、ドキュメントをリロードできますか?

于 2013-05-27T20:16:46.363 に答える