jquery - 包含表格动态数据的 HighChart 迷你图

Question

我正在尝试为一个项目模拟 highcharts 提供的迷你图，但是 highchart 提供的 js fiddle 对于表数据有非常静态的数据。但我想动态填充表的值，而不是对它们进行硬编码。我对这个 highcharts 很陌生，一直在尝试寻找可以使这个 highcharts 动态化的示例，但还没有找到很多。任何有关此主题的信息将不胜感激。请找到此迷你图的当前 jsfiddle(静态定义的表数据)示例。

<div id="result"></div>
<table id="table-sparkline">
    <thead>
        <tr>
            <th>State</th>
            <th>Income</th>
            <th>Income per quarter</th>
            <th>Costs</th>
            <th>Costs per quarter</th>
            <th>Result</th>
            <th>Result per quarter</th>
        </tr>
    </thead>
    <tbody id="tbody-sparkline">
        <tr>
            <th>Alabama</th>
            <td>254</td>
            <td data-sparkline="71, 78, 39, 66 "/>
            <td>296</td>
            <td data-sparkline="68, 52, 80, 96 "/>
            <td>-42</td>
            <td data-sparkline="3, 26, -41, -30 ; column"/>
        </tr>
        <tr>
            <th>Alaska</th>
            <td>246</td>
            <td data-sparkline="87, 44, 74, 41 "/>
            <td>181</td>
            <td data-sparkline="29, 54, 73, 25 "/>
            <td>65</td>
            <td data-sparkline="58, -10, 1, 16 ; column"/>
        </tr>
    </tbody>
</table>

我想在 highcharts 范围内动态获取上述数据。

提前致谢!

编辑CubanGuy，谢谢您的回复。我正在获取 JSON 形式的数据。下面是我的 json 格式。

$(document).ready(function(){
        getReportDataTestStatus();
    });

    function getReportDataTestStatus() {
        var url ="/reports/allTenantLevelData";
        console.log("+++---",url);
        $.get(url).success(function(data){
        /* console.log("dare",data); */     
        var seriesData = [];
        var xCategories = [];
        var i, cat;         
        for(i = 0; i < data.length; i++){
             cat =  data[i].Tenants;
             if(xCategories.indexOf(cat) === -1){
                xCategories[xCategories.length] = cat;
             }
        }   

        for(i = 0; i < data.length; i++){
            if(seriesData){
              var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
              if(currSeries.length === 0){
                  seriesData[seriesData.length] = currSeries = {name: data[i].status, data: []};
              } else {
                  currSeries = currSeries[0];
              }
              var index = currSeries.data.length;
              currSeries.data[index] = parseInt(data[i].studentSizes);
            } else {
               seriesData[0] = {name: data[i].status, data: [parseInt(data[i].studentSizes)]}
            }
        }

我没有关注的是如何用这些数据填充表格。图表(如 highchart)将具有多个包含数据的列和一个包含代表某些数据的图形的列。 Highchart 使用标签静态放置数据列的值。抱歉造成任何困惑，我也是这个论坛的新手。

Answer 1

我需要 50 声望才能对你的问题发表评论(问题)，所以我会写在这里。您必须指定尝试获取动态数据的方式和位置(AJAX、JSON、SharePoint 等)。例如，附加的代码使用 SPServices 从 SharePoint 获取数据:

JS:

 $(document).ready(function () {

 var namesArray = [];
 var valuesArray = [];
 $().SPServices({
     operation: "GetListItems",
     async: false,
     listName: "Test",
     completefunc: function (xData, Status) {
         $(xData.responseXML).SPFilterNode("z:row").each(function () {
             var names = $(this).attr("ows_Names");
             var values = Math.round($(this).attr("ows_Earnings"));
            valuesArray.push([names, values]);
            });
     }
 });
 chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },


    title: {
        text: 'Total values',
        x: -20, //center
    },
    credits: {
        enabled: false
    },

    plotOptions: {
        pie: {
            allowPointSelect: true,
            showInLegend: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {                            
                    return '<b>' + this.point.name + '</b>: $' + this.y;
                }
            },
        }
    },

    subtitle: {
        text: 'This chart shows value from a SharePoint list using SPServices',
        x: -20
    },

    tooltip: {
        shared: true,
        pointFormat: '{series.name}: <b>{point.values}$</b>{point.y}',
        valueDecimals: 2,
        shared: true,
        useHTML: true,
    },

    exporting: {
        enabled: true,
        sourceWidth: 600,
        sourceHeight: 400,
        scale: 2
    },

     legend: {
         layout: 'vertical',
         enabled: true,
         align: 'right',
         verticalAlign: 'bottom',
         padding: 5,
         itemMarginTop: 10,
         itemMarginBottom: 5,
         itemStyle: {
             lineHeight: '14px'
         }
     },

     series: [{
         showInLegend: true,
         type: 'pie',
         name: 'Earnings',
         data: valuesArray
     }]
 });


 });

HTML:

<div id="mychart"></div>
<div id="container" style="width:100%; height:100%;position:relative"></div>