如何在jsFiddle中传输代码?

时间:2014-01-07 07:32:11

标签: javascript google-visualization jsfiddle

我多次试图在小提琴谷歌可视化中正确转移

图表代码,但我总是失败。

这是图表的代码:

   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
     Calls Graph
  </title>
   <script type="text/javascript" src="//www.google.com/jsapi"></script>
   <script type="text/javascript">
    google.load('visualization', '1', {packages: ['corechart']});

   </script>

   <script type="text/javascript">

      function drawVisualization() {

创建并填充数据表。

    var data = google.visualization.arrayToDataTable([

      ['Date',     'DAHDI/i1/ - NO ANSWER', 'DAHDI/i1/ - ANSWERED', 'DAHDI/i2/ - NO ANSWER', 'DAHDI/i2/ - ANSWERED', 'SIP/hcsim1 - NO ASWERED', 'SIP/hcsim1 - ANSWERED', 'SIP/hcsim2 - NO ANSWERED', 'SIP/hcsim2 - ANSWERED', 'SIP/hcsim3 - NO ANSWERED', 'SIP/hcsim3 - ANSWERED',  'SIP/hcsim4 - NO ANSWERED', 'SIP/hcsim4 - ANSWERED', 'SIP/hcsim5 - NO ANSWERED', 'SIP/hcsim5 - ANSWERED', 'TOTAL'],
      ['2013/DEC/29',        257,                    284,                 506,                          321,                      64,                        61,                      30,                         7,                      237,                        111,                      140,                         59,                      9,                          3,            1649  ],
      ['2013/DEC/30',        184,                    284,                 454,                          196,                      51,                        21,                      28,                         9,                      186,                         90,                      132,                         46,                      9,                          0,            2308  ],
      ['2013/DEC/31',        25,                      36,                  83,                           73,                       0,                         0,                       0,                         0,                       55,                         34,                       11,                          4,                      0,                          0,             221  ],
      ['2013/JAN/01',        11,                      13,                  13,                           13,                       1,                         0,                       0,                         0,                        9,                         14,                        4,                          0,                      0,                          0,              82  ],
      ['2014/JAN/02',        160,                    101,                 337,                          370,                      43,                        26,                      22,                        12,                      144,                         97,                       98,                         65,                      2,                          4,            1381  ],
      ['2014/JAN/03',        240,                    106,                 424,                          345,                      64,                        20,                      23,                        15,                      192,                         97,                      128,                         45,                      6,                          0,            1705  ],
      ['2014/JAN/04',        234,                    142,                 444,                          303,                      70,                        29,                      36,                        13,                      246,                         92,                      126,                         61,                     12,                          2,            1780  ]

    ]);

创建并绘制可视化

    var ac = new        google.visualization.ComboChart(document.getElementById('visualization'));

      ac.draw(data, {
      title : 'WEEKLY CALLS',

      width: 1100,

      height: 400,

      vAxis: {title: "No. of Calls"},

      hAxis: {title: "Date"},

      seriesType: "bars",

      series: {5: {type: "line"}}

    });

  }

    google.setOnLoadCallback(drawVisualization);

   </script>

   </head>

   <body style="font-family: Arial;border: 0 none;">

   <div id="visualization" style="width: 600px; height: 400px;"></div>

  </body>
  </html>

请帮我。谢谢

1 个答案:

答案 0 :(得分:1)

这是一个为你准备的小提琴。 http://jsfiddle.net/zalun/RRuN2/

HTML 中,将<div id="visualization" style="width: 600px; height: 400px;"></div> 和Javascript位置于 JavaScript 面板中。

请阅读文档。至少可以在这里找到介绍:http://doc.jsfiddle.net/basic/introduction.html