Question

我正在教自己编码，我很迷茫。我试图采取jsfiddle原型并将其添加到我的网站。我使用Sandvox构建网站...再次我无法编码。

我制作了this（已修改的代码），现在我想在我的网站上运行结果。任何帮助将不胜感激。

HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

JS
$(function () {
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Prevalence of Peformance Enhancing Drug Use By Sport'
    },
    subtitle: {
        text: 'Source: <a href="http://www.samuelwbennett.com">getfast</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Prevalence (%)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'Prevalence',
        data: [
            ['WADA All Pros', 2],
            ['Child Athletes', 4],
            ['HS Football', 6.3],
            ['HS Seniors All Sports', 6.6],
            ['Amatuer Weight-lifters', 8.2],
            ['American Football', 9],
            ['Baseball', 9.4],
            ['Research Estimate All Pros', 10.2],
            ['Top 100 Sprinters (running)', 40],
            ['Professional Bodybuilders', 54],
            ['Tour de France Winners', 79],

        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            x: 4,
            y: 10,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif',
                textShadow: '0 0 3px black'
            }
        }
    }]
});

}）;

Answer 1

我对Sandvox一无所知，但只要你有办法在网站上添加自定义HTML，只需复制并粘贴JSFiddle中的所有HTML，然后将Javascript包装在{{ 1}}标记，并将其粘贴到HTML下方。

您还需要确保在任何其他需要它的脚本之前将包含在网站的某个地方，如果它还没有在那里：

<script> paste here </script>

Answer 2

您可以使用SandVox内置代码注入功能。首先，确保在JSfiddle的左栏（例如jQuery Mobile 1.2.0）中为该库列表添加<script>

添加原始HTML

点击工具栏项＆＃34;对象＆＃34;并选择＆＃34;原始HTML＆＃34;。完成后，单击＆＃34;更新预览＆＃34;

以下是参考：http://www.karelia.com/support/sandvox/help/z/Raw_HTML.html

对于JavaScript或更复杂的HTML

转到将显示HighChart图的网页，然后单击编辑并选择＆＃34; Site Code Injection＆＃34;。现在是时候将您在JSFiddle上的库添加为<script>。使用CDN链接加载这些库。

例如，使用CDN添加jQuery Mobile 1.2.0（缩小）：

<script type="text/javascript" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" />

以下是参考： http://www.karelia.com/support/sandvox/help/z/Code_Injection.html

更新：

最终页面代码应该与此类似：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Prevalence of Peformance Enhancing Drug Use By Sport'
        },
        subtitle: {
            text: 'Source: <a href="http://www.samuelwbennett.com">getfast</a>'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Prevalence (%)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
        },
        series: [{
            name: 'Prevalence',
            data: [
                ['WADA All Pros', 2],
                ['Child Athletes', 4],
                ['HS Football', 6.3],
                ['HS Seniors All Sports', 6.6],
                ['Amatuer Weight-lifters', 8.2],
                ['American Football', 9],
                ['Baseball', 9.4],
                ['Research Estimate All Pros', 10.2],
                ['Top 100 Sprinters (running)', 40],
                ['Professional Bodybuilders', 54],
                ['Tour de France Winners', 79],

            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: -15,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif',
                    textShadow: '0 0 3px black'
                }
            }
        }]
    });
});
//]]>  

</script>


</head>
<body>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>


</body>


</html>

Answer 3

在右侧底部的HTML部分中，右键单击它以显示上下文菜单View Frame Source，然后将弹出源页面。以下是如何获取它的屏幕截图。 enter image description here

如何从jsfiddle获取我的成功原型并在我的网站上提供

3 个答案: