<section id="chart_section" data-transition="flip">
    <header>
        <nav class="left">
            <a href="#"  data-icon="arrow-down-left-2" data-target="back">返回</a>
        </nav>
        <h1 class="title">Jingle Chart</h1>
    </header>
    <article class="active indented">
        <div style="line-height: 2em;margin-bottom: 20px;">
            Jingle Chart是一个移动端专属图表组件(开发中...)，详见https://github.com/shixy/JChart
        </div>
        <ul class="list inset demo-list">
            <li data-icon="next" data-selected="selected">
                <span class="icon stats"></span>
                <a href="#chart_line_section"   data-target="section">
                    <strong>折线图</strong>
                    <p>折线图、平滑曲线图、面积图</p>
                </a>
            </li>
            <li data-icon="next" data-selected="selected">
                <span class="icon bars-2"></span>
                <a href="#chart_bar_section"data-target="section">
                    <strong>柱状图</strong>
                    <p>最基本的柱状图(未来会增加条形图，堆积图)</p>
                </a>
            </li>
            <li data-icon="next" data-selected="selected">
                <span class="icon pie"></span>
                <a href="#chart_pie_section"data-target="section">
                    <strong>饼图</strong>
                    <p>饼图、环形图</p>
                </a>
            </li>
            <li data-icon="next" data-selected="selected">
                <span class="icon stats"></span>
                <a href="#chart_drag_section"data-target="section">
                    <strong>可左右拖动的折线图</strong>
                    <p>折线图、柱状图均支持</p>
                </a>
            </li>
            <li data-icon="next" data-selected="selected">
                <span class="icon bars-2"></span>
                <a href="#chart_dynamic_section"data-target="section">
                    <strong>动态(实时)图表</strong>
                    <p>折线图、柱状图均支持</p>
                </a>
            </li>
        </ul>
    </article>
</section>