Question

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

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

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

下面是我试图在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]
]

谢谢。

Answer 1

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

getJSON method does not work

Answer 2

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

 });

如何将JSON数据导入VS2012以绘制高图

2 个答案: