将Javascript和CSS组合到HTML文件中_Javascript_Html_Css

将Javascript和CSS组合到HTML文件中

javascript html css

将Javascript和CSS组合到HTML文件中,javascript,html,css,Javascript,Html,Css,下面是我想要组合的代码的链接（分别包括CSS、Javascript和HTML）：下面是我将所有内容合并成一个HTML文件的尝试。不幸的是，它没有成功，但我不知道为什么 var图表=新的SmoothieChart({ 网格：{ 填充样式：“#ffffff” }, 标签：{ 填充样式：'#000000' }, 提示：正确， timestampFormatter:SmoothieChart.timeFormatter }), timeSeries=新的timeSeries（）；图表.addTi

下面是我想要组合的代码的链接（分别包括CSS、Javascript和HTML）：

下面是我将所有内容合并成一个HTML文件的尝试。不幸的是，它没有成功，但我不知道为什么


var图表=新的SmoothieChart({
网格：{
填充样式：“#ffffff”
},
标签：{
填充样式：'#000000'
},
提示：正确，
timestampFormatter:SmoothieChart.timeFormatter
}),
timeSeries=新的timeSeries（）；
图表.addTimeSeries（timeSeries{
strokeStyle:“蓝色”，
线宽：1，
填充样式：“rgba（0128255,0.30）”
});
chart.streamTo（document.getElementById（'chart'），100）；
setInterval（函数（）{
timeSeries.append（new Date（）.getTime（），Math.random（）*100）；
}, 1000);
div.smoothie-chart-tooltip{
背景：#999；
填充：1em；
边缘顶部：20px；
字体系列：consolas；
颜色：白色；
字号：17px；
指针事件：无；
}

在属性设置为

src

的

script

标记中不能有任何Javascript。此外，您的

脚本

和

样式

标记应位于文档的

标题

，而不是

画布

标记内

JSFiddle：


document.addEventListener（“DOMContentLoaded”，function（））{
var图表=新的SmoothieChart({
网格：{
填充样式：“#ffffff”
},
标签：{
填充样式：'#000000'
},
提示：正确，
timestampFormatter:SmoothieChart.timeFormatter
}),
timeSeries=新的timeSeries（）；
图表.addTimeSeries（timeSeries{
strokeStyle:“蓝色”，
线宽：1，
填充样式：“rgba（0128255,0.30）”
});
chart.streamTo（document.getElementById（'chart'），100）；
setInterval（函数（）{
timeSeries.append（new Date（）.getTime（），Math.random（）*100）；
}, 1000);
});

将

和

块移到

之外

将

放在

内。

将

放在

的底部（就在关闭

标记之前）。

这将它们组合成一个html表单，并以小提琴的方式工作。请尝试：


div.smoothie-chart-tooltip{
背景：#999；
填充：1em；
边缘顶部：20px；
字体系列：consolas；
颜色：白色；
字号：17px；
指针事件：无；
}

为什么要在画布中声明脚本和样式？包含

src

的

script

标记需要紧跟在结束标记之后。之后的任何代码都需要包装在附加的

脚本标记中。a、 e.…其他代码我做了您建议的更改，但仍然没有一个我尝试过的编译器返回正确的输出。您使用的浏览器是什么？该链接以前不起作用，因此我复制并粘贴了您的代码进行尝试，但它不起作用。现在，这个链接似乎在工作，代码也在工作。嗯，这很奇怪……我在Chrome上，这在JSFIDLE上工作，但在另一个编译器上不工作：。你知道为什么吗？我想这所学校没有看到关于冰沙图表和最佳任务的参考。
<!DOCTYPE html>
<html>
<head>
<script src="http://smoothiecharts.org/smoothie.js">
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){
var chart = new SmoothieChart({
grid: {
  fillStyle: '#ffffff'
},
labels: {
  fillStyle: '#000000'
},
tooltip: true,
timestampFormatter: SmoothieChart.timeFormatter
}),

  timeSeries = new TimeSeries();
chart.addTimeSeries(timeSeries, {
strokeStyle: 'blue',
lineWidth: 1,
fillStyle: 'rgba(0,128,255,0.30)'
 });

chart.streamTo(document.getElementById('chart'), 100);

setInterval(function() {

  timeSeries.append(new Date().getTime(), Math.random() * 100);
}, 1000);
});
</script> 
</head>
<body>
<canvas id="chart" width="500" height="250"></canvas>
</body>
</html>

<script src="http://smoothiecharts.org/smoothie.js"></script>
<canvas id="chart" width="500" height="250"></canvas>
<style>
div.smoothie-chart-tooltip {
  background: #999;
  padding: 1em;
  margin-top: 20px;
  font-family: consolas;
  color: white;
  font-size: 17px;
  pointer-events: none;
}</style>