Question

我需要在JavaScript ＆＃34; Var＆＃34; 中定义 Div （ chartContainer1）值，以便可以在JavaScript图表很遗憾无法做到

HTML：代码

 <div id="chartContainer" style="height: 300px; width: 100%;">

    <div id="chartContainer1">[
    {y: 10, legendText:"Wii U", label: "Wii U 10%"}, 
    {y: 13, legendText:"3DS", label: "3DS 13%"}, 
    {y: 18, legendText:"PS3", label: "PS3 18%"}, 
    {y: 20, legendText:"Xbox One", label: "Xbox One 20%"}
];</div>

图表代码：我试过用

var dsp = document.getElementById("mySpan").innerHTML;  
var dps = document.getElementById("chartContainer1").innerText;

dataPoints是我需要定义Div

文本的地方

  var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Test title"
    },

    data: [{
      type: "stackedBar100",
        dataPoints : dps,
        showInLegend: true, 
        toolTipContent:"{label}"
    }],

  });

  chart.render();

Answer 1

您可以使用eval将其转换为对象

var dps = eval(document.getElementById("chartContainer1").innerText);

但请注意使用eval Why is using the JavaScript eval function a bad idea?

Answer 2

以这种方式将数据存储在DIV中并不是一个好的做法，因为在呈现图表之前，JSON数据将显示在屏幕上。

请阅读：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

相反，如果您确实要将数据与特定HTML元素一起附加，则应将其存储在data-something属性中，如下所示：

<div id="chartContainer1" data-content='[
    {"y": 10, "legendText":"Wii U", "label": "Wii U 10%"}, 
    {"y": 13, "legendText":"3DS", "label": "3DS 13%"}, 
    {"y": 18, "legendText":"PS3", "label": "PS3 18%"}, 
    {"y": 20, "legendText":"Xbox One", "label": "Xbox One 20%"}
]'></div>

并通过以下方式从属性中获取数据：

var dps = JSON.parse(document.getElementById("chartContainer1").dataset.content);

或者经典，

var dps = JSON.parse(document.getElementById("chartContainer1").getAttribute("data-content"));

在JavaScript var String中定义Div文本

2 个答案: