Question

我有一个格子图表，我想显示标准差，最小值和平均值。我有标准偏差，最小值，最大值和平均值进入我的数据集。需要将SD（标准偏差）显示为相应条上条形的不同颜色。向下箭头最小值，向上箭头最大值，任意符号平均值。目前我的图表如下所示

我想在我当前的图表上显示SD，最大值和平均值，就像这里一样

完整的代码如下。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Network Visualization</title>        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">          


            $(function () {                
                servicesName = [];
                servicesName.push('Activity Store', 'Bec', 'bl2-dpx-a-Azure', 'DPX-s1-am3a', 'DPX-s1-bl2/DPX');


                var seriesDataSet = [
                   {
                       name: 'AvgSRTT',
                       data: [674167, 221349, 40049, 635006, 43978],
                       stack: 2544
                   }, {
                       name: 'MaxCount',
                       data: [1410, 12, 284, 497, 1499],
                       stack: 3553
                   }, {
                       name: 'maxDataBytesIn',
                       data: [104034610, 97935, 2781481799, 114003343, 24964398065],
                       stack: 6556889
                   }, {
                       name: 'maxDataBytesOut',
                       data: [61710601, 78619, 262050684, 8902916, 2331402781],
                       stack: 3557879
                   }, {
                       name: 'avgAvgSRTT',
                       data: [674167, 221349, 40049, 635006, 43978],
                       stack: 68699
                   }, {
                       name: 'avgDataBytesIn',
                       data: [104034610, 97935, 2781481799, 114003343, 24964398065],
                       stack: 477889094
                   }, {
                       name: 'avgDataBytesOut',
                       data: [61710601, 78619, 262050684, 8902916, 2331402781],
                       stack: 36547568
                   }
                ];


                var charts = [],
                $containers = $('#trellis td'),
                datasets = seriesDataSet;

            $.each(datasets, function (i, dataset) {
                var yAxisMax = 25000000000;

                if (i == 0 || i == 4) {
                    yAxisMax = 1000000;
                }
                else if (i == 1) {
                    yAxisMax = 4000;
                }

                charts.push(new Highcharts.Chart({

                    chart: {
                        renderTo: $containers[i],
                        type: 'bar',
                        marginLeft: i === 0 ? 110 : 10 
                    },

                    title: {
                        text: dataset.name,
                        align: 'left',
                        x: i === 0 ? 90 : 0
                    },

                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            },
                            stacking: 'normal'
                        },
                        series: {
                            minPointLength: 3
                        }
                    },
                    xAxis: {
                        categories: servicesName,
                        labels: {
                            enabled: i === 0,                           
                        },
                        title: {
                            text: null,
                            align: 'left'
                        },
                    },

                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: null
                        },
                        min: 0,
                        max: yAxisMax
                    },


                    legend: {
                        enabled: false
                    },

                    series: [dataset],
                    minPointLength: 3

                }));
            });

            });
        </script>
    </head>
    <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
        <h1> Network traffic details for each services</h1>
        <span id="date_time"></span>
            <table id="trellis">
                <tr>
                    <td style="min-width: 300px; height: 450px; margin: 0 auto"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
</body>
</html>

如何绑定＆amp;在highcharts中显示条形图上的标准偏差，最小值，最大值和平均值

0 个答案: