javascript - 由于 svg，图表圈未显示在 fiddle 中

Question

我正试图在 fiddle 中运行图表.. 问题是它是在 svg.. 中生成的 在他们的主要网站上，我可以看到图表...... 但是在我的 fiddle 中我看不到 fiddle .. 在下面提供我的代码...你们能告诉我如何修复它吗

工作代码

http://chartjs.devexpress.com/Demos/VizGallery/#chart/circulargaugesbasicelementsscalelabelformatting

fiddle 代码

http://jsfiddle.net/TRjGa/

<div id="gauge" style="width: 60%; height: 100%; float: left;"></div>

    <script>
            $(function ()  
                {
   var html =
'<div id="gauge" style="width: 60%; height: 100%; float: left;"></div>\
<div id="panel" style="width: 40%; float: left; text-align: left; margin-top: 20px;">\
<table style="width: 100%;">\
    <tr>\
        <td><span>Main generator</span></td>\
        <td>\
            <span id="main-value-text"></span>\
            <input id="main-value-input" type="text" />\
        </td>\
    </tr>\
    <tr>\
        <td><span>Additional generator 1</span></td>\
        <td>\
            <span id="additional-value-1-text"></span>\
            <input id="additional-value-1-input" type="text" />\
        </td>\
    </tr>\
    <tr>\
        <td><span>Additional generator 2</span></td>\
        <td>\
            <span id="additional-value-2-text"></span>\
            <input id="additional-value-2-input" type="text" />\
        </td>\
    </tr>\
</table>\
<button id="toggle" style="width: 100px; font-size: 16px; margin-top: 20px;"></button>\
</div>';

$('#chartContainer').append(html);

Answer 1

我这里有一个 jsfiddle，我从您链接的网站演示中获取了代码，并出现了图表。我所做的一切都包括在内http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js作为外部资源和 jQuery。

除了评论中提到的无效引用问题外，我认为您的 jsfiddle 中还有很多其他问题。

这是我做的:

http://jsfiddle.net/xxxjz/1/

<svg id="chartContainer" style="width:100%;height: 600px"></svg>

这是你的 jsfiddle 的更新版本，我已经从 jsfiddle 中删除了所有外部资源，加载了 jQuery 并链接了 dx.chartjs.js 的外部资源。

http://jsfiddle.net/TRjGa/2/