Question

以下代码用于显示图表。问题是＆＃34;数据＆＃34;是硬编码的。如何更改此值，以便图表显示使用以下内容显示的值：

<div id="name"> </div>
<div id="testscore"></div>

以上2个div包含动态值。我想在图表中显示这些值。

<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
//      title:{
//        text: "Olympic Medals of all Times (till 2012 Olympics)"
//      },
      animationEnabled: true,
      legend: {
        cursor:"pointer",
        itemclick : function(e) {
          if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              e.dataSeries.visible = false;
          }
          else {
              e.dataSeries.visible = true;
          }
          chart.render();
        }
      },
      axisY: {
        title: "Time"
      },
      toolTip: {
        shared: true,  
        content: function(e){
          var str = '';
          var total = 0 ;
          var str3;
          var str2 ;
          for (var i = 0; i < e.entries.length; i++){
            var  str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ; 
            total = e.entries[i].dataPoint.y + total;
            str = str.concat(str1);
          }
          str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
          str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";

          return (str2.concat(str)).concat(str3);
        }

      },
      data: [
      {        
        type: "bar",
        showInLegend: true,
        name: "Black",
        color: "#000000",
        dataPoints: [
        { y: 0.18, label: "Name"},
        { y: 0.12, label: "Name 1"},
        { y: 0.59, label: "Name 2"},        
        { y: 1.15, label: "Name 3"},        



        ]
      },
      ]
    });

chart.render();
}
</script>

Answer 1

您只需致电

即可

var data = document.getElementById('name').value;
var data2 = document.getElementById('testscore').value;

如果它是单个值，它会起作用;否则，你需要这样做：

var array = $('#your.id').data('stuff');

在这里，＆＃34;东西＆＃34;只不过是

<div data-stuff="some data" ></div>

或者，通过以下方式创建一个数组：

var array = new Array();

最后，将数据存储到数组中。

使用HTML和JavaScript将数据传递到图表中

1 个答案: