Question

我一直在调整我找到的一些jsfiddle文件，以便结果符合我的需要。碰巧的是，我的代码在jsfiddle上工作正常，但在我的localhost上工作（使用python启动HTTPServer）。更具体地说，HTML文件只获得div中的数字100。我只是将文件复制到我的电脑上，我需要添加/更改更多内容吗？我是编码的新手，我很乐意为你提供帮助。

jsfiddle的链接： https://jsfiddle.net/sgfcusk4/

HTML文件：

<div id="tooltip" class="hidden">
  <p><span id="value">100</span>
  </p>
</div>

JavaScript文件：

var margins = {
    top: 12,
    left: 55,
    right: 24,
    bottom: 24
  },
  legendPanel = {
    width: 180
  },
  width = 500 - margins.left - margins.right - legendPanel.width,
  height = 100 - margins.top - margins.bottom,
  dataset = [{
    data: [{
      month: 'Portugal',
      count: 60
    }, {
      month: 'Espanha',
      count: 40
    }],
    name: 'Diesel'
  }, {
    data: [{
      month: 'Portugal',
      count: 35
    }, {
      month: 'Espanha',
      count: 50
    }],
    name: 'Petrol'
  }, {
    data: [{
      month: 'Portugal',
      count: 5
    }, {
      month: 'Espanha',
      count: 10
    }],
    name: 'Alternative'
  }],
  series = dataset.map(function(d) {
    return d.name;
  }),
  dataset = dataset.map(function(d) {
    return d.data.map(function(o, i) {
      // Structure it so that your numeric
      // axis (the stacked amount) is y
      return {
        y: o.count,
        x: o.month
      };
    });
  }),
  stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function(group) {
    return group.map(function(d) {
      // Invert the x and y values, and y0 becomes x0
      return {
        x: d.y,
        y: d.x,
        x0: d.y0
      };
    });
  }),
  svg = d3.select('body')
  .append('svg')
  .attr('width', width + margins.left + margins.right + legendPanel.width)
  .attr('height', height + margins.top + margins.bottom)
  .append('g')
  .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
  xMax = d3.max(dataset, function(group) {
    return d3.max(group, function(d) {
      return d.x + d.x0;
    });
  }),
  xScale = d3.scale.linear()
  .domain([0, xMax])
  .range([0, width]),
  months = dataset[0].map(function(d) {
    return d.y;
  }),
  _ = console.log(months),
  yScale = d3.scale.ordinal()
  .domain(months)
  .rangeRoundBands([0, height], .1),
  xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom'),
  yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left'),
  colours = d3.scale.category10(),
  groups = svg.selectAll('g')
  .data(dataset)
  .enter()
  .append('g')
  .style('fill', function(d, i) {
    return colours(i);
  }),
  rects = groups.selectAll('rect')
  .data(function(d) {
    return d;
  })
  .enter()
  .append('rect')
  .attr('x', function(d) {
    return xScale(d.x0);
  })
  .attr('y', function(d, i) {
    return yScale(d.y);
  })
  .attr('height', function(d) {
    return yScale.rangeBand();
  })
  .attr('width', function(d) {
    return xScale(d.x);
  })
  .on('mouseover', function(d) {
    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
      .style('left', xPos + 'px')
      .style('top', yPos + 'px')
      .select('#value')
      .text(d.x);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function() {
    d3.select('#tooltip').classed('hidden', true);
  })

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis);
/* Rectangulo amarelo a volta dos tipos de combustivel
svg.append('rect')
    .attr('fill', 'yellow')
    .attr('width', 160)
    .attr('height', 30 * dataset.length)
    .attr('x', width + margins.left)
    .attr('y', 0);
*/

//Texto do lado direito
series.forEach(function(s, i) {
  svg.append('text')
    .attr('fill', 'black')
    .attr('x', width + margins.left + 8)
    .attr('y', i * 24 + 24)
    .text(s);

  //Barras do lado direito       
  svg.append('rect')
    .attr('fill', colours(i))
    .attr('width', 60)
    .attr('height', 20)
    .attr('x', width + margins.left + 90)
    .attr('y', i * 24 + 6);
});

和css文件：

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

#tooltip {
  position: absolute;
  text-align: center;
  width: 40px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
}

我唯一做的就是将文件内容复制到计算机上的新文件中，并命名为“sketch.html”，“sketch.css”和“sketch.js”。

当我在localhost上打开HTML时，我唯一看到的是数字“100”。它没有显示任何错误消息。

请帮忙。

Answer 1

您需要在html文件中包含css和javascript文件。

css属于Plunker元素：link

<link rel="stylesheet" href="sketch.css" />代码中的js：script

基本示例：

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

Answer 2

在HTML文件的标题中添加 <link href="sketch.css" type="stylesheet">，在关闭正文标记之前添加<script src="sketch.js"></script>

Answer 3

只是复制内容不会将HTML连接到JS和CSS。你需要告诉它包含这些文件，它不会发生。

在HTML的<head>部分链接到您的css（假设所有文件都在同一个文件夹中）：

<link rel="stylesheet" href="sketch.css">

并在HTML文件的末尾添加：

<script type="text/javascript" src="sketch.js"></script>

代码在jsfiddle上正常工作，但不适用于本地主机

3 个答案: