0

JSON ファイルのデータに基づいてハイチャートをプロットできるように、JSON ファイルのデータを VS2012 c# コードにインポートしたいと考えています。YouTube とファイル ドキュメントで多くのビデオを確認しましたが、実行して必要に応じて出力する単一のコードを見つけることができませんでした。

JSON ファイルからデータをマッピングし、vs2012 で使用してハイチャートをプロットするサンプル コードを教えてください。

----------------更新された質問-------------

以下は、JSON形式からデータを呼び出したいJavaスクリプトで呼び出そうとしている関数ですが、関数を呼び出すことができません。以下は私のコードです

<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>

データをハイチャートに渡したいのですが、私は初心者なので、どんな助けでも大歓迎です。

==============編集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 に答える