javascript - 将 Javascript 和 CSS 组合成 HTML 文件
问题描述
这是我想组合的代码的链接(分别包括 CSS、Javascript、HTML):http: //jsfiddle.net/4tjv85zh/3/
下面是我尝试将它们全部合并到一个 HTML 文件中。不幸的是,它不成功,但我不知道为什么。
<!DOCTYPE html>
<html>
<body>
<canvas id="chart" width="500" height="250">
<script src="http://smoothiecharts.org/smoothie.js">
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>
<style>
div.smoothie-chart-tooltip {
background: #999;
padding: 1em;
margin-top: 20px;
font-family: consolas;
color: white;
font-size: 17px;
pointer-events: none;
}
</canvas>
</body>
</html>
解决方案
您不能在具有属性集的script
标记内包含任何 Javascript。src
此外,您的script
和style
标签应该在head
您的文档中,而不是在canvas
标签内。
JSFiddle:http: //jsfiddle.net/x8wyzgke/
<!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>
推荐阅读
- javascript - React.forwardRef 与流中的通用 Props 类型
- c# - 如何进行 T-SQL 查询,其中输出的第一个字母等于一个字符
- firebase - 获取多个用户
- yii2 - yii2 kartik fileinput 多个加载的文件预览
- javascript - 如何在 onclick 事件的图像期间添加动画?这是我的代码
- mongodb - Kotlin <--> Mongo 缓存
- python - 通过 Bs4 Python 抓取页面并删除多个空格
- vaadin - 上传按钮的uploadSucceeded方法在单击上传按钮时被触发两次而不是一次
- momentjs - 为什么moment.duration 一个月差异的日期不返回月份
- php - 删除 opencart 产品模型