Javascript 从html文件中分离json_Javascript_Jquery_Html_Json

Javascript 从html文件中分离json

javascript jquery html json

Javascript 从html文件中分离json,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我开始使用html图表来显示来自json文件的数据。直到五天前，我很少使用html图表。但现在我只做这些所以我使用了一个anychartchart，我一直在试图找到一种方法，用一个“json”文件填充这个图表在多次尝试错误之后，我能够在某种程度上分离数据并将其移动到json文件中。问题是文件不是完全jsonstring 如您所见，MyFile.json包含json字符串和一些图表组件。我希望我的json文件是唯一的json数据；其他所有内容都应该在html、另一个javascript或其他任

我开始使用html图表来显示来自

json

文件的数据。直到五天前，我很少使用html图表。但现在我只做这些

所以我使用了一个

anychart

chart，我一直在试图找到一种方法，用一个“json”文件填充这个图表

在多次尝试错误之后，我能够在某种程度上分离数据并将其移动到

json

文件中。问题是文件不是完全

json

string

如您所见，MyFile.json包含

json

字符串和一些图表组件。我希望我的json文件是唯一的json数据；其他所有内容都应该在html、另一个javascript或其他任何地方。但是它不能在

json

文件中

换句话说，MyFile.json应该只包含以下内容：

{“x”：“一月”，“价值”：10000}，{“x”：“二月”，“价值”：12000}，{“x”：“三月”，“价值”：18000}]

这可能吗？感谢您的帮助。谢谢

以下是MyFile.json：

这是我的

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>


文件
$（文档）.ready（函数（）{
$.getJSON（'MyFile.json'，函数（数据）{
控制台日志（数据）；
anychart.fromJson（data.draw（）；
});
});

您可以使用

数据-*

属性将json数据嵌入html元素。

如果我正确理解了您的问题。。。在Anycharts中可能有一种方法可以更好地做到这一点（比如将一个对象指定为“设置”，然后将另一个对象指定为“数据”），但这里有一种方法可以让您自己实现这一点：

JSON文件：

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

javascript文件中的AJAX请求：

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

一种方法是首先将每个图表附加到容器中，然后使用序列设置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);
    }
});

$.getJSON（'MyFile.json'，函数（图表）{
对于（变量i=0，len=charts.length；i

我在json文件中看不到任何其他数据。我认为OP的意思是“类型”：“行”以及可能不在数据数组中的任何内容，即表示部分。您可以使用jquery数据将json链接到表中$（“#container”）.data（'series'，data.chart.series）。然后检索它var series=$（'#container'）。data（'series'）我不想在html中嵌入json数据。我想将它与html完全分离。

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