将图表添加到html项目

Question

我是这个领域的新手。我想将 chart.js 代码添加到我的项目中。但我做不到。 这是我的 main.html - 主要区域：

 <!-- main area -->
      <div class="main-content">
        <div class="row mb25">
          <div class="col-xs-12">
            <div class="panel">
              <div class="panel-heading border">
                Line chart
              </div>
              <div class="panel-body">
                <div class="line-chart">
                  <svg style='height:500px;width:100%;'></svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /main area -->

和 nvd3.js 页面上的 chartjs 代码：

(function ($) {
    'use strict';
  
    // Line chart
  
    d3.json('cumulativeLineData.json', function(data) {
      nv.addGraph(function() {
        var lineChart = nv.models.lineChart()
                      .x(function(d) { return d[0] })
                      .y(function(d) { return d[1]/100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
                      .color(d3.scale.category10().range())
                      .useInteractiveGuideline(true)
                      ;
    
         lineChart.xAxis
            .tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
            .tickFormat(function(d) {
                return d3.time.format('%x')(new Date(d))
              });
    
        lineChart.yAxis
            .tickFormat(d3.format(',.1%'));
    
        d3.select('.line-chart svg')
            .datum(data)
            .call(lineChart);
    
        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(lineChart.update);
    
        return lineChart;
      });
    });
  
  })(jQuery);
  

提前致谢 这是现在的样子：enter image description here 但我想显示：enter image description here

Answer 1

您是否将脚本导入 HTML 文档？

<script src="chart.js"></script>

您可以将其添加到其他标签下方和 body 标签内。