C# 海图不'；t显示数据

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

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

在

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);
        })
    });

其中，它使用容器的

id

将图表呈现给

根据脚本，我希望我的图表有一个x轴的时间和y轴的价值序列。但是，当我运行应用程序时，没有显示任何数据（下面的屏幕截图）

我还检查了谷歌chrome

控制台

面板中的json数据，我可以看到一组

时间

（x轴）和

值

（系列）被成功解析。

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

我在谷歌上搜索了类似的问题，发现了大量可能的解决方案，但我很困惑应该遵循哪一个

---

非常感谢您的帮助。

发布此问题后，我对Highchart一无所知。经过两周的研究和使用，我已经学会了在图表中显示数据的基本配置。为了其他寻求帮助或刚开始使用Highchart的开发人员的利益，我就是这样实现它的

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

    function plotTrendData(data)
{
    $.ajax({
        type: 'GET',
        url: '/your url goes here/',
        data: { requestData: data },
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data)
        {
            if (data.length > 4) {
                prepareChartData(data);
                if (myChart === null) {
                    plotChartData(dataSeries, xTitle);
                }
                else {
                    addChartSeries(dataSeries, xTitle);
                }
            }
        }
    });
}

准备图表数据的函数（

dataChart

paramater包含

json

数据）

当然，还有一个函数，用于在id为container的

div

元素上创建图表

    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: '<small><font color="{series.color}"><strong>{series.name}</strong></font>: <strong>{point.y}</strong></small><br/>',
            headerFormat: '<span style="font-size: 8px">{point.key}</span><br/>',
            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
        }]
    });
}

函数plotChartData（数据系列，xtitle）
{
myChart=新的Highcharts.Chart({
图表：{
renderTo:'容器'，
键入：“行”，
zoomType:'xy'，
平移：是的，
平移键：“shift”，
绘图边框宽度：1
},
学分：{
已启用：false
},
标题：{
文本：“我的样本图表”
},
图例：{
布局：“水平”，
对齐：“左”，
项目距离：10，
边框宽度：0，
itemMarginTop:0，
itemMarginBottom:0，
填充：20
},
打印选项：{
系列：{
国家：{
悬停：{
已启用：false
}
},
数据标签：{
启用：false，
格式：“{y}”
},
allowPointSelect:false
}
},
xAxis：{
键入：“日期时间”，
标签：{
轮调：-60，
格式：“{值：%d%b%Y%I:%M}”，
风格：{
fontSize:'9px'，
fontFamily:“Verdana，无衬线”
}
},
十字线：{
已启用：true
}
},
亚克斯：{
gridLineColor:“#DDDDDD”，
网格线宽度：0.5
},
工具提示：{
定位器：功能（）{
返回{
x:this.chart.plotLeft，
y:这个是.chart.plotTop
}
},
是的，
pointFormat:“{series.name}：{point.y}
”，
headerFormat:“{point.key}
”，
xDateFormat:“%d-%m-%Y%H:%m:%S”，
分享：是的，
数值小数：2，
followPointer:true，
影子：错，
边框宽度：0，
背景颜色：“rgba（255255,0.8）”
},
系列：[{
姓名：xtitle，
数据：数据系列
}]
});
}

---

上面的脚本和配置将数据显示到我的highchart中。真是太神奇了

我相信您正在为每个数据点制作一个系列，而不是包含多个数据点的单个系列。highcharts期望的是类似于

系列：[{name:'some name'，data:[1,2,3,4]}]

而您提供的是

系列：[1,2,3,4]

@Rob谢谢您的回复。那么，你是说Highcharts不接受每个数据点一个系列？如果是这样的话，那么在我的函数

getChart

中，它应该是这样的

系列：{name:'some name'，data:dataseries}

，其中

dataseries

仍然是一个值数组；我的观点是，您使用的API不正确<代码>系列不是一组数据点，它更详细地描述了系列。请看一下文档。如果您希望每个数据点有一个系列；这很好，但是您仍然需要为每个系列提供一个数据数组（即使该数组包含一个元素）。所以是的，我相信你在评论中的例子应该work@Rob，我已将

系列

更改为类似的

系列：[{name:'series 1'，data:[23.9483,24.1183,25.2383，…]}]

并显示图表。还感谢您分享系列| Highcharts文档上的链接。我还注意到，当数组的元素是

系列

中的字符串时，线图不会显示。

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
        });
    };

    function plotTrendData(data)
{
    $.ajax({
        type: 'GET',
        url: '/your url goes here/',
        data: { requestData: data },
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data)
        {
            if (data.length > 4) {
                prepareChartData(data);
                if (myChart === null) {
                    plotChartData(dataSeries, xTitle);
                }
                else {
                    addChartSeries(dataSeries, xTitle);
                }
            }
        }
    });
}

    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
    });
}

    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: '<small><font color="{series.color}"><strong>{series.name}</strong></font>: <strong>{point.y}</strong></small><br/>',
            headerFormat: '<span style="font-size: 8px">{point.key}</span><br/>',
            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
        }]
    });
}