Question

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

我有一个控制器，它返回一个对象数组。我解析对象并创建具有javascript-date和总销售属性的新对象。

虽然试图跟随这个小提琴来创建类似的Highcharts，但我还没有成功。似乎Highcharts没有认出我的DateTimes。我做错了什么想法？这就是我得到的：

我试图得到这样的东西：

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值数据系列和所有这些数据的单个类别集合）

为什么highchart不能识别我的约会？

1 个答案: