0

我想将 JSON 文件中的数据导入到我的 VS2012 c# 代码中，以便我可以根据 JSON 文件中的数据绘制我的 highcharts。我检查了 youtube 和文件文档上的许多视频，但找不到运行的单个代码并根据需要提供输出。

请给我一个示例代码，它将映射来自 JSON 文件的数据，在 vs2012 中使用它并绘制高图。

----------------更新问题-------------

下面是我试图在 java 脚本中调用的函数，我想从 JSON 格式调用数据，但我无法调用我的函数，下面是我的代码

<script>
    $(document).ready(function () {

        var options = {
            chart: {
                renderTo: 'container',
                type: 'spline'
            },
            series: [{}]
        };

        alert("outside");
        $.getJSON('data.json', function (data) {
            alert("INside");
            options.series[0].data = data;
            var chart = new Highcharts.Chart(options);
        });

    });
</script>

并想将数据传递给highcharts，由于我是新手，任何帮助将不胜感激。

==============编辑2 ================================== === 我尝试用于数据的 Json 文件采用以下格式。

[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]

谢谢你。

4

2 回答 2

0

如果 JSON 文件未在浏览器上呈现并且您收到 404 错误，那么您可能面临 mime 类型处理问题，请参阅以下链接以解决该问题，

getJSON 方法不起作用

于 2013-11-14T18:28:25.140 回答
0

ASP.NET MVC 服务器代码：

namespace ABPMVCTest.Web.Controllers
{
[AbpMvcAuthorize]
public class HomeController : ABPMVCTestControllerBase
{
    static Random _ran=new Random();
    public ActionResult Index()
    {
        return View();
    }

    public ContentResult GetJsonResult()
    {

        var dataList = new List<ChartDataFormat>();
        GetData(dataList, "总收入");
        GetData(dataList, "投币收入");
        GetData(dataList, "扫码充电收入");
        GetData(dataList, "售线收入");
        var dataJsonStr=JsonConvert.SerializeObject(dataList,new JsonSerializerSettings(){ContractResolver = new CamelCasePropertyNamesContractResolver()});
        return Content(dataJsonStr);
    }

    private static List<ChartDataFormat> GetData(List<ChartDataFormat> dataList, string key)
    {

        var list = new List<int>();

        for (int i = 0; i < 7; i++)
        {

            list.Add(_ran.Next(1, 3000));
        }
        dataList.Add(new ChartDataFormat
        {
            Name = key,
            Data = list
        });

        return dataList;
    }
}

class ChartDataFormat
{
    public string Name { get; set; }
    public List<int> Data { get; set; }
}
}

客户端javascript代码： 

$(function() {

Highcharts.setOptions({
    lang: {

            printChart: '打印图表',
            downloadJPEG: '下载为JPEG图片',
            downloadPDF: '下载为PDF',
            downloadPNG: '下载为PNG图片',
            downloadSVG: '下载为SVG矢量图',
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            shortMonths: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    }
});
var nowDate = new Date();
var option = {

    chart: {
        type: 'area'
    },
    title: {
        text: '收入趋势图'
    },
    subtitle: {
        text: '没有选择时间范围的话，默认显示当日/月前后3天/月的数据'
    },
    credits: {
        enabled:false
    },
    xAxis: {
        type: 'datetime',
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        },
        dateTimeLabelFormats: {
            day: "%Y-%m-%d",
            week: "%A",
            month: "%Y-%m",
            year: "%Y"
        }
    },
    yAxis: {
        title: {
            text: '单位：元'
        },
        labels: {
            formatter: function() {
                return this.value;
            }
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' 元',
        dateTimeLabelFormats: {
            day: "%Y-%m-%d,%A",
            week: "%A开始, %Y-%m-%d",
            month: "%Y-%m",
            year: "%Y"
        }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        },
        series: {
            pointStart:Date.UTC(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate()-3) ,
            pointInterval: 24 * 36e5 //一天
        }
    },
    series: [{}]
}

var url = "/Home/GetJsonResult";

$.getJSON(url, function(data) {
    option.series = data;
    $('#container').highcharts(option);
});

 });
于 2016-03-24T10:03:46.800 回答