Question

我正在尝试模拟一个项目的highcharts提供的迷你图表，但是由highchart提供的js小提琴有一个非常静态的表数据数据。但我想为表动态填充值而不是硬编码。我对这个高级图表非常陌生，一直试图找到一些例子，我可以在这个例子中使这个高级图表充满活力，但却找不到很多。有关此主题的任何信息将不胜感激。请查找此迷你图表的当前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使用标记静态地放置数据列的值。对不起任何困惑，我也是这个论坛的新手。

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>

HighChart Sparkline Chart，包含表格的动态数据

1 个答案: