將FusionCharts與Metronic模板集成

Question

我試圖在metronic模板上顯示融合圖表，但它在集成後顯示空白頁面。

Answer 1

據我所知metronic template是一個工作在Bootstrap 3.3.5 Framework，jQuery 1.10.2等等上的模板引擎。我爲您提供了一個使用FusionCharts和bootstrap的示例，並查看它是如何工作的。查看此fiddle在此處試用您的代碼並查看它是否有效。

您出現空白頁面的一個可能原因可能是腳本未按正確的順序加載。檢查控制檯，您可能會收到錯誤「FusionCharts未定義」。

說明性的JS代碼片段來呈現FusionCharts的折線圖：

FusionCharts.ready(function() { 
 
    var visitChart = new FusionCharts({ 
 
     type: 'msline', 
 
     renderAt: 'chart-container', 
 
     width: '550', 
 
     height: '350', 
 
     dataFormat: 'json', 
 
     dataSource: { 
 
      "chart": { 
 
       "caption": "Number of visitors last week", 
 
       "subCaption": "Bakersfield Central vs Los Angeles Topanga", 
 
       "captionFontSize": "14", 
 
       "subcaptionFontSize": "14", 
 
       "subcaptionFontBold": "0", 
 
       "paletteColors": "#0075c2,#1aaf5d", 
 
       "bgcolor": "#ffffff", 
 
       "legendBgColor": "#d9ffb3", 
 
       "showBorder": "0", 
 
       "showShadow": "0", 
 
       "showCanvasBorder": "0", 
 
       "usePlotGradientColor": "0", 
 
       "legendBorderAlpha": "0", 
 
       "legendShadow": "0", 
 
       "showAxisLines": "0", 
 
       "showAlternateHGridColor": "0", 
 
       "divlineThickness": "1", 
 
       "divLineIsDashed": "1", 
 
       "divLineDashLen": "1", 
 
       "divLineGapLen": "1", 
 
       "xAxisName": "Day", 
 
       "showValues": "0"    
 
      }, 
 
      "categories": [ 
 
       { 
 
        "category": [ 
 
         { "label": "Mon" }, 
 
         { "label": "Tue" }, 
 
         { "label": "Wed" }, 
 
         { 
 
          "vline": "true", 
 
          "lineposition": "0", 
 
          "color": "#6baa01", 
 
          "labelHAlign": "center", 
 
          "labelPosition": "0", 
 
          "label": "National holiday", 
 
          "dashed":"1" 
 
         }, 
 
         { "label": "Thu" }, 
 
         { "label": "Fri" }, 
 
         { "label": "Sat" }, 
 
         { "label": "Sun" } 
 
        ] 
 
       } 
 
      ], 
 
      "dataset": [ 
 
       { 
 
        "seriesname": "Bakersfield Central", 
 
        "data": [ 
 
         { "value": "15123" }, 
 
         { "value": "14233" }, 
 
         { "value": "25507" }, 
 
         { "value": "9110" }, 
 
         { "value": "15529" }, 
 
         { "value": "20803" }, 
 
         { "value": "19202" } 
 
        ] 
 
       }, 
 
       { 
 
        "seriesname": "Los Angeles Topanga", 
 
        "data": [ 
 
         { "value": "13400" }, 
 
         { "value": "12800" }, 
 
         { "value": "22800" }, 
 
         { "value": "12400" }, 
 
         { "value": "15800" }, 
 
         { "value": "19800" }, 
 
         { "value": "21800" } 
 
        ] 
 
       } 
 
      ], 
 
      "trendlines": [ 
 
       { 
 
        "line": [ 
 
         { 
 
          "startvalue": "17022", 
 
          "color": "#6baa01", 
 
          "valueOnRight": "1", 
 
          "displayvalue": "Average" 
 
         } 
 
        ] 
 
       } 
 
      ] 
 
     } 
 
    }).render(); 
 
});