Question

我从json三维数组开发了一个非常简单的柱形图：

0：以毫秒为单位的时间戳 1：给予认可 2：获得认可

[[1490288274653,7,175]，[1490374674653,1,1]，[1490806674653,1,1]，[1490979474653,3,3]，[1491065874653,4,4]，[1491411474653,6,0] [1491497874653,2,0]，[1491584274653,18,0]，[1491843474653,8,0]，[1491929874653,1,0]，[1492621074653,25,0]，[1492707474653,12,0]，[1492793874653 ，2,0]，[1501174674653,2,0]，[1503593874653,2,2]，[1510765074653,1,0]，[1510851474653,1,1]，[1510937874653,5,0]，[1511197074653,7 ，3]，[1511369874653,7,2]，[1511542674653,1,0]，[1511801874653,7,3]，[1511974674653,1,0]，[1512493074653,1,1]，[1512665874653,2,2 ]，[1512752274653,9,4]，[1513184274653,2,2]，[1513270674653,2,2]，[1513616274653,3,0]，[1513789074653,4,2]，[1514912274653,1,0] [1515430674653,1,0]]

数组在xAxis上显示时间戳，并在y轴上显示识别。如何使用＆＃34;收到识别＆＃34;创建堆叠列？堆积在＆＃34;给予认可＆＃34;在yAxis上？

我已经搜索了谷歌数小时，我找不到像我一样使用相同json数组的示例，没有字符串作为类别。

我假设我必须自定义系列或plotOptions并通过数字数据[1]，数据[2]识别数据列？

如何获得类似此CSV列的类似列：

http://marialaustsen.com/columncsv.html

HTML：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>myGraph</title>

    <!--
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>

    <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->

    <!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->

    <script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>

<body>

    <div id="container" style="height: 400px; width: 100%"></div>

    <script>
        $(function() {

            console.log($);

            $.getJSON('http://localhost:3000/recognition', function(data) {

                // Create the chart

                window.chart = new Highcharts.StockChart({

                    chart: {

                         type: 'column',

                        renderTo: 'container'

                    },

                    legend: {
                        enabled: true,

                    },
                    tooltip: {
                            pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
                            valueSuffix: ' k',
                            shared: true,
                        },

                    series: [{

                        name: 'Brands',

                        data: data


                    }],

                    rangeSelector: {

                        selected: 1,

                        inputDateFormat: '%Y-%m-%d',

                        floating: true,

                        y: -75,

                        verticalAlign: 'bottom'

                    },

                    title: {
                        text: 'Team members received and sent recognition'
                    },

                    navigator: {
                        margin: 50
                    },
                    xAxis: {
                        type: 'datetime',
                        title: {
                            text: 'DATES'
                        }
                    },

                    yAxis: {
                        title: {
                            text: 'BRANDS'
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },

                }, function(chart) {

                    // apply the date pickers

                    setTimeout(function() {

                        $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()

                    }, 0)

                });

            });

            // Set the datepicker's date format

            $.datepicker.setDefaults({

                dateFormat: 'yy-mm-dd',

                onSelect: function(dateText) {

                    chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());

                    //this.onchange();

                    this.onblur();

                }

            });

        });
    </script>
</body>

</html>

Answer 1

您需要准备数据 - 将其分成两个单独的系列：

  series: (function() {
    var series = [{
      name: 'received recognition',
      data: []
    }, {
      name: 'given recognition',
      data: []
    }];

    data.forEach(function(p) {
      series[0].data.push([p[0], p[1]]);
      series[1].data.push([p[0], p[2]]);
    });

    return series;
  })()

现场演示： http://jsfiddle.net/kkulig/88sr9ofn/

Highstock highcharts堆栈列jQuery.getJSON数组不起作用

1 个答案: