如何在chrome扩展中使用Chartist.js?

时间:2017-11-23 12:50:36

标签: javascript html google-chrome

我想在chrome扩展名的popup.html中绘制图表。

我在官方的Chartist页面中跟随“开始”。[https://gionkunz.github.io/chartist-js/getting-started.html]

但它没有用。

我的代码如下:

popup.html

<html>
<head>
    <style>
        body {
            width : 250px; min-height: 300px;
        }
    </style>
    <link rel="stylesheet"
      href="bower_components/chartist/dist/chartist.min.css">

    <link rel="stylesheet" 
href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js">
</script>
</head>

<body>
  <div class="ct-chart ct-perfect-fourth">chart test</div>
   <div id="viewer"></div>
</body>

Chartist.js

var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
 };

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data);

我得到了一个日志“Chartist未定义”其中是“new Chartist.Line('。ct-chart',data)”

0 个答案:

没有答案