带有动态数据的jQuery条形图

Question

我是jQuery排行榜的新手，有人可以帮我吗？ 下面是一个静态图表，我必须填充动态数据。我已经创建了JSON文件，但我不知道如何调用这些数据。

提前致谢。

<div class="top-stats-panel">
    <h4 class="widget-h">Daily Sales</h4>
    <div class="bar-stats">
        <ul class="progress-stat-bar clearfix">
            <li data-percent="50%"><span class="progress-stat-percent pink"></span></li>
            <li data-percent="90%"><span class="progress-stat-percent"></span></li>
            <li data-percent="70%"><span class="progress-stat-percent yellow-b"></span></li>
        </ul>
        <ul class="bar-legend">
            <li><span class="bar-legend-pointer pink"></span> New York</li>
            <li><span class="bar-legend-pointer green"></span> Los Angels</li>
            <li><span class="bar-legend-pointer yellow-b"></span> Dallas</li>
        </ul>
        <div class="daily-sales-info">
            <span class="sales-count">1200 </span> <span class="sales-label">Products Sold</span>
        </div>
    </div>
</div>

$(function () {
    "use strict";
    jQuery('.progress-stat-bar li').each(function () {
        jQuery(this).find('.progress-stat-percent').animate({
            height: jQuery(this).attr('data-percent')
        }, 1000);
    });
});