0

以下のように json でエンコードされたデータ セットがあります (mYSQL からレコードを取得し、json に変換するために php を使用します)

[{"CELL_NAME":"WELI01A","CI":1},{"CELL_NAME":"WELI02A","CI":2},{"CELL_NAME":"WELI02P","CI":3},{"CELL_NAME":"WELI02Q","CI":7},{"CELL_NAME":"WELI02B","CI":8},{"CELL_NAME":"COL001A","CI":11},{"CELL_NAME":"COL001B","CI":12},{"CELL_NAME":"COL001C","CI":13},{"CELL_NAME":"COL001P","CI":16},{"CELL_NAME":"COL001Q","CI":17},{"CELL_NAME":"COL001R","CI":18},{"CELL_NAME":"COL002A","CI":21},{"CELL_NAME":"COL002B","CI":22},{"CELL_NAME":"COL002C","CI":23},{"CELL_NAME":"COL002P","CI":26},{"CELL_NAME":"COL002Q","CI":27},{"CELL_NAME":"COL002R","CI":28},{"CELL_NAME":"COL003A","CI":31},{"CELL_NAME":"COL003B","CI":32},{"CELL_NAME":"COL003C","CI":33}]

上記のデータ セットを Echarts (baidu) にバインドしたいので、以下の HTML コードを見つけてください

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>READ JSON Example (getJSON)</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>
<body>
 <script type="text/javascript">
 $(document).ready(function() {
    $.getJSON("dataload.php",function(result){
        $.each(result, function(i, field){
            $("#output").append("CELL NAME: "+ field.CELL_NAME + " CELL ID: "+field.CI +"<br/>");
        });
    });
 });
 </script>
 <div id="output"></div>

    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script src="js/echarts-all.js"></script>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['Time','value']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : field.CELL_NAME
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            series : [
                {
                    name:'Time',
                    type:'bar',
                    data:field.CI
                }
            ]
        });

    </script>

</body>
</html>

これを実行すると、json出力のみが表示されます。グラフはポップアップしません。これをソートするのを手伝ってください

4

1 に答える 1

2

  1. xAxis.data配列である必要があり、配列でseries.dataもあります。

  2. 最初にデータをフォーマットしてから、パラメーターとして myChart.setOption に渡す必要があります。

  3. echarts.init と setOption を関数に入れるとより良いでしょう

  4. これがその例です

于 2016-08-17T13:31:29.420 に答える