HighCharts 迷你图，包含表格的动态数据

Question

我正在尝试模拟 highcharts 为一个项目提供的迷你图，但是 highchart 提供的 js fiddle 对表格数据有一个非常静态的数据。但我想为表格动态填充值，而不是对它们进行硬编码。我对这个 highcharts 非常陌生，并且一直在尝试找到可以使这个 highchart 动态但没有找到很多示例。任何有关此主题的信息将不胜感激。请为此迷你图查找当前 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范围内动态获取以上数据。

提前致谢！

编辑 古巴人，谢谢你的回复。我正在以 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）将有多个包含数据的列和 1 个包含表示某些数据的图表的列。 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>