javascript - 为什么 highchart 无法识别我的日期？

Question

我正在尝试在 ASP.NET MVC 上运行的网站上实现 HIghcharts。

我有一个返回对象数组的 Controller 。我解析这些对象并创建具有 javascript-date 和总销售额属性的新对象。

虽然尝试按照这个 fiddle 创建类似的 Highcharts，但我没有成功。 Highcharts 似乎无法识别我的日期时间。有什么想法我做错了吗？这是我得到的:

我正在尝试得到这样的东西:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/arearange/

来自 API 的数据:

[
  {
    "Date": "2017-04-01T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-02T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-03T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-04T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-05T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-06T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-07T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-08T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-09T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-10T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-11T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-12T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-13T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-14T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-15T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-16T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-17T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-18T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-19T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-20T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-21T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-22T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-23T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-24T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-25T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-26T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-27T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-28T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-29T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-30T00:00:00",
    "TotalSales": 0
  }
]

按钮操作:

// The button action
    $('#btnGenerate').click(function() {
        var uri2 = '/api/SalesPerDay/?startDate=2017-01-01&endDate=2017-12-31';
        $.getJSON(uri2,
            {
                startDate: $("#from").val(),
                endDate: $("#to").val()
            },

            function (data1) {
                var values = [];
                for (var i = 0; i < data1.length; i++) {
                    var item = {};
                    item.y = data1[i].TotalSales;
                    item.x = new Date(data1[i].Date);
                    values.unshift(item);
                }
                values.sort(function(a, b) {
                    return a.x - b.x;
                });
                chart.series[0].setData(values);
                chart.xAxis[0].setCategories(values);
            });
    });

我的图表:

var chart = new Highcharts.Chart('salesChart', {
            chart: {
                type: 'arearange',
                zoomType: 'x'
            },
            title: {
                text: 'Monthly sales'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Total sold SEK'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            series: [
                {
                    type: 'area',
                    name: 'Total Sold',
                    data: []
                }
            ]
        });

Answer 1

问题出在这里:

chart.xAxis[0].setCategories(values);

删除它。

由于每个数据点都设置了 X 值，因此您不需要类别。仅当您有一些 x 和 y 值独立的数据时才需要它。 (例如多个 y 值数据系列以及所有这些数据的一组类别)