Question

我是使用Highcharts的新手。我创建了一个示例ASP.NET MVC应用程序，用于从我的控制器返回到我的视图页面的json数据中创建一个线图。另外，我使用ajax通过成功回调函数获取图表的数据。

这是数据的结构（在List中示例4行TagTimeValue类型）

private List<TagTimeValue> GetTagTimeValues()
    {
        var tagTimeValues = new List<TagTimeValue>
        {
            new TagTimeValue { ID=1, Name="CDT158", Value="23.9483", Time="04/01/2017", Good="true", Questionable="No", Units="vol", Substituted="not"},
            new TagTimeValue { ID=2, Name="CDT158", Value="24.1183", Time="04/02/2017", Good="true", Questionable="No", Units="vol", Substituted="not"},
            new TagTimeValue { ID=3, Name="CDT158", Value="25.2383", Time="04/03/2017", Good="false", Questionable="yes", Units="vol", Substituted="not"},
            new TagTimeValue { ID=4, Name="CDT158", Value="25.6713", Time="04/04/2017", Good="false", Questionable="yes", Units="vol", Substituted="not"}
        };

        return tagTimeValues;
    }

这是ajax调用

调用的方法

public ActionResult UpdateTrend()
    {
        var values = GetTagTimeValues();
        return Json(values, JsonRequestBehavior.AllowGet);
    }

通过UpdateTrend()

中的ajax调用调用Index.cshtml的脚本

$(document).ready(function () {
        $.ajax({
            url: "/home/UpdateTrend",
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            cache: false
        }).success(function (dataChart) {
            var Xaxis = [];
            var dataSeries = [];

            for (var i = 0; i < dataChart.length; i++) {
                var items = dataChart[i];
                var XcategoriesItem = items.Time;
                var seriesData = items.Value;

                Xaxis.push(XcategoriesItem);
                dataSeries.push(seriesData);  
            }

            console.log(dataSeries);
            getChart(Xaxis, dataSeries);

        }).error(function (er, xhr, e) {
            console.log("Error: ", er, xhr, e);
        })
    });

并且getChart函数

function getChart(Xaxis, dataseries)
    {
        var myChart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Alarms/Events Chart'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{y}%'
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time'
                },
                categories: Xaxis
            },
            yAxis: {
                title: {
                    text: 'Value'
                }
            },
            series: dataseries
        });
    };

使用<div id="container" style="width:100%; height: 500px;"></div>容器将图表呈现给id。

根据脚本，我希望我的图表的x轴为Time，y轴的值为series。但是，当我运行应用程序时，没有显示数据（截图如下）。

我还检查了Google的chrome console面板中的json数据，我可以看到成功解析了Time（x轴）和Value（系列）数组。

我的图表中是否缺少不允许显示系列的配置？或者，我的图表脚本是错误的吗？

我搜索了类似的问题，我找到了大量可能的解决方案，但是，我应该关注哪一个很困惑。

非常感谢任何帮助。

Answer 1

自发布此问题以来，我对Highchart没有任何了解。经过2周的研究和使用库，我已经学会了将在图表中显示数据的基本配置。为了寻求帮助或者只是开始使用Highchart的其他开发人员的利益，这就是我实现它的方式。

ajax调用从服务器获取数据并绘制到图表上

dataChart

准备图表数据的功能（json参数包含function prepareChartData(dataChart) { if (dataSeries.length > 0) dataSeries = []; for (var i = 0; i < dataChart.length; i++) { var items = dataChart[i]; var xDate = +moment(items.Time); var seriesData = parseFloat(items.Value); dataSeries.push([xDate, seriesData]); xTitle = items.Name; } }数据）

    function addChartSeries(dataSeries, xTitle)
{
    myChart.addSeries({
        name: xTitle,
        data: dataSeries
    });
}

将系列添加到现有图表（多系列图表）

的功能

div

当然，在您的container元素上创建图表的功能为function plotChartData(dataseries, xtitle) { myChart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', zoomType: 'xy', panning: true, panKey: 'shift', plotBorderWidth: 1 }, credits: { enabled: false }, title: { text: 'My Sample Chart' }, legend: { layout: 'horizontal', align: 'left', itemDistance: 10, borderWidth: 0, itemMarginTop: 0, itemMarginBottom: 0, padding: 20 }, plotOptions: { series: { states: { hover: { enabled: false } }, dataLabels: { enabled: false, format: '{y}' }, allowPointSelect: false } }, xAxis: { type: 'datetime', labels: { rotation: -60, format: '{value:%d %b %Y %I:%M}', style: { fontSize: '9px', fontFamily: 'Verdana, sans-serif' } }, crosshair: { enabled: true } }, yAxis: { gridLineColor: '#DDDDDD', gridLineWidth: 0.5 }, tooltip: { positioner: function () { return { x: this.chart.plotLeft, y: this.chart.plotTop } }, useHTML: true, pointFormat: '{series.name}: {point.y} ', headerFormat: '{point.key} ', xDateFormat: '%d-%m-%Y %H:%M:%S', shared: true, valueDecimals: 2, followPointer: true, shadow: false, borderWidth: 0, backgroundColor: 'rgba(255,255,255,0.8)' }, series: [{ name: xtitle, data: dataseries }] }); }

class Envelope {
public:
    Envelope() {}
    Envelope(const Envelope&) = default;
    Envelope(Envelope& e) : Envelope(const_cast<const Envelope&>(e)) {}
    ...
    }
};

上面的脚本和配置将数据显示在我的高图中。这不是太棒了！

Highcharts不显示数据

1 个答案: