Chart

#饼形图

饼图将信息输出为圆图，中心有可选标签。示例标记：

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

#折线图

下一个示例显示折线图标记。数据集是用图表元素内的 SPAN 元素定义的。

<div
    data-control="chart-line"
    data-time-mode="weeks"
    style="height: 200px"
    data-chart-options="xaxis: {mode: 'time'}">
    <span
        data-chart="dataset"
        data-set-color="#008dc9"
        data-set-data="[1477857082000, 400], [1477943482000, 380], [1478029882000, 340], [1478116282000, 540], [1478202682000, 440], [1478289082000, 360], [1478375482000, 220]"
        data-set-name="Visits">
    </span>
</div>

#条形图

下一个示例显示了条形图标记。这wrap-legend 类是可选的，它管理图例布局。这data-height 和data-full-width 属性也是可选的。

<div
    class="control-chart wrap-legend"
    data-control="chart-bar"
    data-height="100"
    data-full-width="1">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

Example

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

<div
    class="control-chart wrap-legend"
    data-control="chart-bar"
    data-height="100"
    data-full-width="1">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

#状态列表

状态和值列表

Example

<div class="control-status-list">
    <ul>
        <li>
            <span class="status-icon success"><i class="icon-check"></i></span>
            <span class="status-text success">Software is up to date</span>
            <a href="#" class="status-label link">Update</a>
        </li>

        <li>
            <span class="status-icon warning"><i class="icon-exclamation"></i></span>
            <span class="status-text warning">Some issues need attention</span>
            <a href="#" class="status-label link">View</a>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">System build</span>
            <span class="status-label primary">313</span>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">Event log items</span>
            <span class="status-label primary">200</span>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">Online since</span>
            <span class="status-label link">4th April 2014</span>
        </li>
    </ul>
</div>