在高圖表中顯示系列中的json鍵值對的總數

我有一個json數組，它有一個鍵狀態和兩個值傳遞和重新掃描。我需要顯示通過和重新掃描的百分比，根據他們在highcharts的總數。目前我已經在代碼的系列部分給出了硬編碼值2和1。在高圖表中顯示系列中的json鍵值對的總數

下面是我的highcharts代碼：

$(function() { 

    // Make monochrome colors and set them as default for all pies 
    Highcharts.getOptions().plotOptions.pie.colors = (function() { 
     var colors = [], 
      base = Highcharts.getOptions().colors[0], 
      i; 

     for (i = 0; i < 10; i += 1) { 
      // Start out with a darkened base color (negative brighten), and end 
      // up with a much brighter color 
      colors.push(Highcharts.Color(base).brighten((i - 3)/7).get()); 
     } 
     return colors; 
    }()); 

    // Build the chart 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Authentic vs. Rescan, 2016' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Status', 
      data: [ 
       { name: 'Authentic', y: 2 }, 
       { name: 'Rescan', y: 1 } 
      ] 
     }] 
    }); 
}); 

/*chart theme*/ 
/** 
* Dark theme for Highcharts JS 
* @author Torstein Honsi 
*/ 

Highcharts.createElement('link', { 
    href: 'https://fonts.googleapis.com/css?family=Unica+One', 
    rel: 'stylesheet', 
    type: 'text/css' 
}, null, document.getElementsByTagName('head')[0]); 

Highcharts.theme = { 
    colors: ["#27ecea", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", 
     "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], 
    chart: { 
     backgroundColor: { 
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, 
     stops: [ 
      [0, 'rgba(0,0,0,0.1)'], 
      [1, 'rgba(0,0,0,0.1)'] 
      ] 

     }, 
     style: { 
     fontFamily: "'Unica One', sans-serif" 
     }, 
     plotBorderColor: '#606063' 
    }, 
    title: { 
     style: { 
     color: '#E0E0E3', 
     textTransform: 'uppercase', 
     fontSize: '20px' 
     } 
    }, 
    subtitle: { 
     style: { 
     color: '#E0E0E3', 
     textTransform: 'uppercase' 
     } 
    }, 
    xAxis: { 
     gridLineColor: '#707073', 
     labels: { 
     style: { 
      color: '#E0E0E3' 
     } 
     }, 
     lineColor: '#707073', 
     minorGridLineColor: '#505053', 
     tickColor: '#707073', 
     title: { 
     style: { 
      color: '#A0A0A3' 

     } 
     } 
    }, 
    yAxis: { 
     gridLineColor: '#707073', 
     labels: { 
     style: { 
      color: '#E0E0E3' 
     } 
     }, 
     lineColor: '#707073', 
     minorGridLineColor: '#505053', 
     tickColor: '#707073', 
     tickWidth: 1, 
     title: { 
     style: { 
      color: '#A0A0A3' 
     } 
     } 
    }, 
    tooltip: { 
     backgroundColor: 'rgba(0, 0, 0, 0.85)', 
     style: { 
     color: '#F0F0F0' 
     } 
    }, 
    plotOptions: { 
     series: { 
     dataLabels: { 
      color: '#B0B0B3' 
     }, 
     marker: { 
      lineColor: '#333' 
     } 
     }, 
     boxplot: { 
     fillColor: '#505053' 
     }, 
     candlestick: { 
     lineColor: 'white' 
     }, 
     errorbar: { 
     color: 'white' 
     } 
    }, 
    legend: { 
     itemStyle: { 
     color: '#E0E0E3' 
     }, 
     itemHoverStyle: { 
     color: '#FFF' 
     }, 
     itemHiddenStyle: { 
     color: '#606063' 
     } 
    }, 
    credits: { 
     style: { 
     color: '#666' 
     } 
    }, 
    labels: { 
     style: { 
     color: '#707073' 
     } 
    }, 

    drilldown: { 
     activeAxisLabelStyle: { 
     color: '#F0F0F3' 
     }, 
     activeDataLabelStyle: { 
     color: '#F0F0F3' 
     } 
    }, 

    navigation: { 
     buttonOptions: { 
     symbolStroke: '#DDDDDD', 
     theme: { 
      fill: '#505053' 
     } 
     } 
    }, 


    rangeSelector: { 
     buttonTheme: { 
     fill: '#505053', 
     stroke: '#000000', 
     style: { 
      color: '#CCC' 
     }, 
     states: { 
      hover: { 
       fill: '#707073', 
       stroke: '#000000', 
       style: { 
        color: 'white' 
       } 
      }, 
      select: { 
       fill: '#000003', 
       stroke: '#000000', 
       style: { 
        color: 'white' 
       } 
      } 
     } 
     }, 
     inputBoxBorderColor: '#505053', 
     inputStyle: { 
     backgroundColor: '#333', 
     color: 'silver' 
     }, 
     labelStyle: { 
     color: 'silver' 
     } 
    }, 

    navigator: { 
     handles: { 
     backgroundColor: '#666', 
     borderColor: '#AAA' 
     }, 
     outlineColor: '#CCC', 
     maskFill: 'rgba(255,255,255,0.1)', 
     series: { 
     color: '#7798BF', 
     lineColor: '#A6C7ED' 
     }, 
     xAxis: { 
     gridLineColor: '#505053' 
     } 
    }, 

    scrollbar: { 
     barBackgroundColor: '#808083', 
     barBorderColor: '#808083', 
     buttonArrowColor: '#CCC', 
     buttonBackgroundColor: '#606063', 
     buttonBorderColor: '#606063', 
     rifleColor: '#FFF', 
     trackBackgroundColor: '#404043', 
     trackBorderColor: '#404043' 
    }, 


    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', 
    background2: '#505053', 
    dataLabelsColor: '#B0B0B3', 
    textColor: '#C0C0C0', 
    contrastTextColor: '#F0F0F3', 
    maskColor: 'rgba(255,255,255,0.3)' 
}; 

Highcharts.setOptions(Highcharts.theme); 
/*---------------*/

下面是我的JSON：

var json={ 
    "BMS": [{ 
     "id":"A", 
     "fname": "vid123431.mp4", 
     "lat": "73.81303019", 
     "lng": "18.58494347", 
     "status": "pass" 
    },{ 
     "id":"B", 
     "fname": "vid123431.mp4", 
     "lat": "23.986", 
     "lng": "32.345645", 
     "status": "pass" 
    }, { 
     "id":"C", 
     "fname": "VID_20160801_154039509.mp4", 
     "lat": "23.986", 
     "lng": "32.345645", 
     "date": "2016-08-01", 
     "time": "15:41:37", 
     "status": "rescan" 
    } 
] 
}

可以在此任意一個幫助嗎？

來源

2016-09-07 Aparna

可能是重複的：http://stackoverflow.com/questions/22335366/highcharts-possible-to-summarize-series-data-and-show-in-title –

實際上，在那個鏈接中，它只是將所有整數值相加並顯示。在我的情況下，我需要計算可兌換狀態的數量和傳遞狀態的數量。根據這個數字，我需要顯示條形圖。 – Aparna

這個例子可能有幫助：http://jsfiddle.net/jlbriggs/mxpwrh34/目前找不到原始問題 – jlbriggs

你也可以遍歷您的JSON數據並計算合格的數量和重新掃描：

Highcharts.each(json.BMS, function(p) { 
    if (p.status === 'pass') { 
    passNumber++; 
    } else if (p.status === 'rescan') { 
    rescanNumber++; 
    } 
});

然後你就可以做出傳球的次數包含一系列信息，並重新掃描：

var series = { 
    name: 'Status', 
    data: [{ 
    name: 'pass', 
    y: passNumber 
    }, { 
    name: 'rescan', 
    y: rescanNumber 
    }] 
};

在這裏你可以找到一個例子它如何工作：http://jsfiddle.net/worg6jLz/42/

來源

2016-09-08 10:15:51

在高圖表中顯示系列中的json鍵值對的總數

回答

相關問題