如何将一段javascript代码分配给变量并在textarea中显示?

时间:2015-09-24 06:26:49

标签: javascript html

到目前为止,我已经尝试了一个代码,它是一个分配一段javascript代码并用id =“myCodeArea”显示它。但它没有以正确的格式显示,因为我使用JSON.stringify转换JSON中的代码我想要原始形式的代码。任何人都可以帮助实现它吗?

var chart =  {      
      title:{
        text: "Books Issued from Central Library"
      },
      axisY :{
        includeZero: false
      },
      axisX: {
        valueFormatString: "MMM",
        interval: 1,
        intervalType: "month"
      },
      data: [
      {        
        type: "spline",  
        indexLabelFontColor: "orangered",      
        dataPoints: [
        { x: new Date(2012, 00, 1), y: 1352 },
        { x: new Date(2012, 01, 1), y: 1514,  indexLabel: "Exams" },
        { x: new Date(2012, 02, 1), y: 1321 },
        { x: new Date(2012, 03, 1), y: 1163 },
        { x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
        { x: new Date(2012, 05, 1), y: 1201 },
        { x: new Date(2012, 06, 1), y: 1186 },
        { x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
        { x: new Date(2012, 08, 1), y: 1438 },
        { x: new Date(2012, 09, 1), y: 1305 },
        { x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
        { x: new Date(2012, 11, 1), y: 1391 }        
        ]
      }
      ]
    };
 var xyz = document.getElementById("myCodeArea");
 xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
						<textarea id ="myCodeArea" cols="100"></textarea>
</div>

2 个答案:

答案 0 :(得分:0)

也许这是一种让你进行编辑的方法(稍微剥离你的数据项)......

var chart =  {      
      title:{
        text: "Books Issued from Central Library"
      },
      axisY :{
        includeZero: false
      },
      axisX: {
        valueFormatString: "MMM",
        interval: 1,
        intervalType: "month"
      },
      data: [
      {        
        type: "spline",  
        indexLabelFontColor: "orangered",      
        dataPoints: [
        { x: "2012-00-01", y: 1352 },
        { x: "2012-01-01", y: 1514,  indexLabel: "Exams" },
        { x: "2012-02-01", y: 1321 }
        ]
      }
      ]
    };
 var xyz = document.getElementById("myCodeArea");
 xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
    <textarea id ="myCodeArea" cols="100"></textarea>
</div>

...然后当你通过你的方法执行图表对象时,你可以解析类似这样的日期:

var some_var = new Date(chart.data[i].dataPoints.x);

如果你仍然需要嵌入函数本身,这里有一种如何在函数中嵌入函数的方法

// function name and parameters to pass
var fnstring = "runMe";
var fnparams = [1, 2, 3];

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

Src:http://www.sitepoint.com/call-javascript-function-string-without-using-eval/

答案 1 :(得分:0)

我更改了代码xyz.textContent = JSON.stringify(chart, null, 4); 这里4是你想要的空格数。 希望你期待这个。

var chart =  {      
      title:{
        text: "Books Issued from Central Library"
      },
      axisY :{
        includeZero: false
      },
      axisX: {
        valueFormatString: "MMM",
        interval: 1,
        intervalType: "month"
      },
      data: [
      {        
        type: "spline",  
        indexLabelFontColor: "orangered",      
        dataPoints: [
        { x: new Date(2012, 00, 1), y: 1352 },
        { x: new Date(2012, 01, 1), y: 1514,  indexLabel: "Exams" },
        { x: new Date(2012, 02, 1), y: 1321 },
        { x: new Date(2012, 03, 1), y: 1163 },
        { x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
        { x: new Date(2012, 05, 1), y: 1201 },
        { x: new Date(2012, 06, 1), y: 1186 },
        { x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
        { x: new Date(2012, 08, 1), y: 1438 },
        { x: new Date(2012, 09, 1), y: 1305 },
        { x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
        { x: new Date(2012, 11, 1), y: 1391 }        
        ]
      }
      ]
    };
 var xyz = document.getElementById("myCodeArea");
 xyz.textContent = JSON.stringify(chart, null, 4);
<div id="myTextArea">
						<textarea id ="myCodeArea" cols="100"></textarea>
</div>