图表无法正确呈现

时间：2013-08-20 12:10:32

标签： jquery kendo-ui

我目前正在开发一个基于来自SQL Server仓库的JSONP数据的仪表板项目。 我已经设法配置Kendo数据源以正确读取JSONP并确认我的仪表板中的图表对象和标签条，如果删除了所有其他对象，则每次正确渲染，但是当我在屏幕上组合多个图表时，充其量我显示3-4个图表，这些图表显示从一次刷新到下一次刷新的不同值。 我对JQuery的了解绝对是初学者，来自传统的BI桌面应用程序，而不是开发背景，所以我确信我错过了一些简单的东西，但我已经通过大量的例子和论坛帖子无济于事。 顺便说一句，我可以通过用$（function（）{}）包装它们来强制显示标签和第一个图表;但如果我包装其他图表，它们都不会出现，如果我将所有图表包装在一起，我会得到相同的结果。 我已经在下面提供了我的代码，提前谢谢。

安迪。

JS 

var dscTop1Stats = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop1SourceStatsByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop2Stats = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop2SourceStatsByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop3Stats = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop3SourceStatsByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop1StatsTrend = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop1SourceStatsTrendByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop2StatsTrend = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop2SourceStatsTrendByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop3StatsTrend = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetTop3SourceStatsTrendByUserData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


var dscTop10Sources = new kendo.data.DataSource({
transport: {
    read: {
        cache: false,
        url: "http://localhost:52387/Dash/GetRankingBySourcesData",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        jsonpCallback: "JsonPCallBack"
    }
}
});


$(function() {
$("#tabstrip").kendoTabStrip({
    contentUrls: [
        "Sources.html",
        "Source Types.html",
        "Keyword Analysis.html",
        "Trend Analysis.html"
    ],
    animation: {
        close: {
            duration: 1000,
            effects: "fadeOut"
        },
        open: {
            duration: 500,
            effects: "fadeIn"
        }
    }
});
$("#tabstrip").kendoTabStrip({
    animation: { open: { effects: "fadeIn" } },
    contentUrls: [
        '../../Sources.html',
        '../../Source Types.html',
        '../../Keyword Analysis.html',
        '../../Trend Analysis.html'
    ]
});

$("#chartSummary").kendoChart({
    dataSource: dscTop10Sources,
    legend: {
        position: "left"
    },
    seriesDefaults: {
        labels: {
            template: "#= category # - #= kendo.format('{0:P}', percentage)#",
            position: "outsideEnd",
            visible: true,
            background: "transparent"
        }
    },
    series:
    [{
        type: "column",
        field: "SearchStoriesCount",
        name: "Searched Stories"
    }],
    categoryAxis: {
        field: "Name",
        labels: {
            rotation: -45,
            font: "10px Arial,Helvetica,sans-serif",
            padding: { top: 0 }
        },
        majorGridLines: {
            visible: true
        }
    },
    valueAxis: {
        labels: {
            format: "N0"
        },
        majorUnit: 300,
        line: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= category # - #= value #"
    }
});

$("#chartTop1").kendoChart({
    dataSource: dscTop1Stats,
    title: {
        text: "# Times stories searched in 31 days"
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "bar"
    },
    series:
    [{
        field: "StoriesSearched",
        name: "Stories Searched"
    }],
    seriesColors: ["#AF99D7"],
    chartArea: {
        margin: {
            left: -3
        },
        background: ""
    },
    categoryAxis: {
        field: "AuthorName",
        labels: {
            rotation: -0,
            visible: false
        },
        majorGridLines: {
            visible: false
        }
    },
    valueAxis: {
        labels: {
            format: "N0"
        },
        majorUnit: 2000,
        line: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        format: "N0"
    }
});

    $("#chartTop2").kendoChart({
        dataSource: dscTop2Stats,
        title: {
            text: "# Times stories searched in 31 days"
        },
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "bar"
        },
        series:
        [{
            field: "StoriesSearched",
            name: "Stories Searched"
        }],
        seriesColors: ["#AF99D7"],
        chartArea: {
            margin: {
                left: -3
            },
            background: ""
        },
        categoryAxis: {
            field: "AuthorName",
            labels: {
                rotation: -0,
                visible: false
            },
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            labels: {
                format: "N0"
            },
            majorUnit: 2000,
            line: {
                visible: false
            }
        },
        tooltip: {
            visible: true,
            format: "N0"
        }
    });

    $("#chartTop3").kendoChart({
        dataSource: dscTop3Stats,
        title: {
            text: "# Times stories searched in 31 days"
        },
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "bar"
        },
        series:
        [{
            field: "StoriesSearched",
            name: "Stories Searched"
        }],
        seriesColors: ["#AF99D7"],
        chartArea: {
            margin: {
                left: -3
            },
            background: ""
        },
        categoryAxis: {
            field: "AuthorName",
            labels: {
                rotation: -0,
                visible: false
            },
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            labels: {
                format: "N0"
            },
            majorUnit: 2000,
            line: {
                visible: false
            }
        },
        tooltip: {
            visible: true,
            format: "N0"
        }
    });

    $("#areaTop1").kendoSparkline({
        title: {
            text: "31 Day Trend"
        },
        dataSource: dscTop1StatsTrend,
        series: [{
            type: "line",
            field: "StoriesSearched",
            name: "Relevant Stories",
            width: 2,
        }],
        seriesColors: ["#6B5593"],
        chartArea: {
            width: 350,
            height: 80,
            background: ""
        },
        categoryAxis: {
            field: "Date"
        }
    });

    $("#areaTop2").kendoSparkline({
        title: {
            text: "31 Day Trend"
        },
        dataSource: dscTop2StatsTrend,
        series: [{
            type: "line",
            field: "StoriesSearched",
            name: "Relevant Stories",
            width: 2,
        }],
        seriesColors: ["#6B5593"],
        chartArea: {
            width: 350,
            height: 80,
            background: ""
        },
        categoryAxis: {
            field: "Date"
        }
    });

    $("#areaTop3").kendoSparkline({
        title: {
            text: "31 Day Trend"
        },
        dataSource: dscTop3StatsTrend,
        series: [{
            type: "line",
            field: "StoriesSearched",
            name: "Relevant Stories",
            width: 2,
        }],
        seriesColors: ["#6B5593"],
        chartArea: {
            width: 350,
            height: 80,
            background: ""
        },
        categoryAxis: {
            field: "Date"
        }
    });
});

$.getJON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
    $.each(top1Stats, function (i, item) {
        var content = '<p class="title_text">' + item.AuthorName + '</p>';
        $(content).appendTo("#Top1Author");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
    $.each(top1Stats, function (i, item) {
        var content = '<p class="tag_text">' + item.Tags + '</p>';
        $(content).appendTo("#Top1Tags");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
    $.each(top1Stats, function (i, item) {
        var content = '<p class="title_text">' + item.PercentUserContent + '% / ' + item.PercentTotalContent + '%</p>';
        $(content).appendTo("#Top1UservsTotal");
    });
});


$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
    $.each(top2Stats, function (i, item) {
        var content = '<p class="title_text">' + item.AuthorName + '</p>';
        $(content).appendTo("#Top2Author");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
    $.each(top2Stats, function (i, item) {
        var content = '<p class="tag_text">' + item.Tags + '</p>';
        $(content).appendTo("#Top2Tags");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
    $.each(top2Stats, function (i, item) {
        var content = '<p class="title_text">' + item.PercentUserContent + '% / ' + item.PercentTotalContent + '%</p>';
        $(content).appendTo("#Top2UservsTotal");
    });
});


$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
    $.each(top3Stats, function (i, item) {
        var content = '<p class="title_text">' + item.AuthorName + '</p>';
        $(content).appendTo("#Top3Author");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
    $.each(top3Stats, function (i, item) {
        var content = '<p class="tag_text">' + item.Tags + '</p>';
        $(content).appendTo("#Top3Tags");
    });
});

$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
    $.each(top3Stats, function (i, item) {
        var content = '<p class="title_text">' + item.PercentUserContent + '% / ' + item.PercentTotalContent + '%</p>';
        $(content).appendTo("#Top3UservsTotal");
    });
});

HTML 

<section class="well content-wrapper">
    <div class="main_content">
        <div class="frame_tabstrip">
            <div id="tabstrip">
                <ul>
                    <li class="k-state-active">Option1</li>
                    <li>Option2</li>
                    <li>Option3</li>
                    <li>Option4</li>
                </ul>
            </div>
        </div>
        <div class="frame_top">
            <h2 class="contentTitle">&nbsp;text here&nbsp;<small>text here</small></h2>
            <div id="chartSummary">
            </div>
        </div>
        <div class="frame_bottom">
            <h2 class="contentTitle">&nbsp;text here&nbsp;<small>text here</small></h2>
            <div class="summary_bar">
                <div class="summary_title">
                    <div id="Top1Author">
                    </div>
                    <div id="Top1Tags">
                    </div>
                </div>
                <div class="summary_bullet">
                    <div id="chartTop1">
                    </div>
                </div>
                <div class="summary_area">
                    <div id="areaTop1">
                    </div>
                </div>
                <div class="summary_value">
                    <div id="Top1UservsTotal" style="text-align:center">
                    </div>
                    <div id="Top1UservsTotal_Desc" style="text-align:center">
                        <p class="tag_text"></p>
                    </div>
                </div>
            </div>
            <div class="summary_bar">
                <div class="summary_title">
                    <div id="Top2Author">
                    </div>
                    <div id="Top2Tags">
                    </div>
                </div>
                <div class="summary_bullet">
                    <div id="chartTop2">
                    </div>
                </div>
                <div class="summary_area">
                    <div id="areaTop2">
                    </div>
                </div>
                <div class="summary_value">
                    <div id="Top2UservsTotal" style="text-align:center">
                    </div>
                    <div id="Top2UservsTotal_Desc" style="text-align:center">
                        <p class="tag_text"></p>
                    </div>
                </div>
            </div>
            <div class="summary_bar">
                <div class="summary_title">
                    <div id="Top3Author">
                    </div>
                    <div id="Top3Tags">
                    </div>
                </div>
                <div class="summary_bullet">
                    <div id="chartTop3">
                    </div>
                </div>
                <div class="summary_area">
                    <div id="areaTop3">
                    </div>
                </div>
                <div class="summary_value">
                    <div id="Top3UservsTotal" style="text-align:center">
                    </div>
                    <div id="Top3UservsTotal_Desc" style="text-align:center">
                        <p class="tag_text"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

1 个答案:

答案 0 :(得分：0)

唯一的JsonPCallback值是对此的修复。

相关问题
最新问题