دمج جافا سكريبت و CSS في ملف HTML

-1

هنا رابط الكود الذي أود دمجه (يشمل 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>

3 الاجابة

1
افضل جواب

لا يمكن أن يكون لديك أي جافا سكريبت داخل script علامة مع 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>
:مؤلف
1
افضل جواب

هذا يجمعهم جميعًا في شكل 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>
:مؤلف
-1
افضل جواب

نقل <script> و <style> كتل خارج <canvas> .

مكان <style> في داخل <head> . مكان <script> في الجزء السفلي من <body> (قبل الإغلاق مباشرة </body> بطاقة شعار).

:مؤلف
فوق
قائمة طعام