從html文件中分離json

我開始使用html圖表來顯示來自json文件的數據。直到五天前，我很少用html圖表做任何事情。但現在，我就是這麼做的。從html文件中分離json

所以我使用的是anychart圖表，我一直在試圖找到一種方法來用'json`文件填充圖表。

經過多次試錯，我能夠有點分開數據並將其移動到json文件。問題是該文件的字符串不完全是json。

正如你所看到的，MyFile.json有json字符串和一些圖表組件。我想我的json文件只能是json數據;一切應該在HTML，另一個JavaScript，或其他任何地方。但它不能在json文件中。

換句話說，MyFile.json應該只包括本：

{ 「X」：「月」，「價值」：10000}，{ 「X」：「二月」，」值「：12000}，{」x「：」March「，」value「：18000}]

這可能嗎？任何幫助表示讚賞。謝謝。

這裏的MyFile.json：

{ 
    "chart": { 
     "type": "line", 
     "series": [{ 
      "seriesType": "spline", 
      "data": [{ 
       "x": "January", 
       "value": 10000 
      }, { 
       "x": "February", 
       "value": 12000 
      }, { 
       "x": "March", 
       "value": 18000 
      }] 
     }], 
     "container": "container" 
    } 
}

這是我的html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css"> 
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html> 


<script> 

    $(document).ready(function(){ 
     $.getJSON('MyFile.json', function(data) { 
      console.log(data); 
      anychart.fromJson(data).draw(); 
     }); 
    }); 

</script>

來源

2017-05-22 rbhat

我看不到在JSON文件 – brk

我覺得OP是指東西，如「類型」的任何其他數據：「線」，可能任何非數據陣列中，即呈現部。 – James

您可以使用jQuery數據將json鏈接到表。 $（ '＃集裝箱'）。數據（ '系列'，data.chart.series）。然後檢索它的VAR系列= $（「＃集裝箱」）。數據（「系列」） – cpugourou

如果我理解正確你的問題......有可能是內Anycharts的方式以更好的方式來做到這一點（如分配對象的「設置」，然後指定一個不同機智的「數據」），但這裏，你可以實現一個方法自己：

JSON文件：

[{ 
    "x": "January", 
    "value": 10000 
}, { 
    "x": "February", 
    "value": 12000 
}, { 
    "x": "March", 
    "value": 18000 
}]

AJAX請求JavaScript文件：

$(document).ready(function(){ 
    $.getJSON('MyFile.json', function(data) { 
     var wrapper = { 
      "chart": { 
      "type": "line", 
      "series": [{ 
       "seriesType": "spline", 
       "data": data // adding the ajax response data 
      }], 
      "container": "container" 
      } 
     }; 
     anychart.fromJson(wrapper).draw(); 
    }); 
});

來源

2017-05-22 14:29:40 James

這工作得很好。謝謝。 – rbhat

您可以使用data-*屬性的HTML元素嵌入JSON數據。

來源

2017-05-22 14:24:47

我不想在HTML中嵌入JSON數據。我想將它從html中完全分開。 – rbhat

一種方法是每個字符追加t首先進入容器，然後用該系列設置jquery數據。

$.getJSON('MyFile.json', function (charts) { 
    for (var i = 0, len = charts.length; i < len; i++) { 
     $('#container').append('<div id="chart_' + i + '"></div>'); 
     $('chart_' + i).data('series', charts[i].series.data); 
    } 
});

來源

2017-05-22 14:54:34 cpugourou

從html文件中分離json

回答

相關問題