2014-09-01 18 views
1

我開發了一個使用amcharts顯示線圖的移動應用程序。我以此鏈接爲例,請訪問http://jsfiddle.net/ATQUm/825/並開發我的應用程序。現在我堅持設置主題。它包含不同的主題,如「黑暗」,「光」,「粉筆」等,每個人都有自己的JS。作爲一個例子,我附上了dark.js的鏈接。使用amcharts爲圖表設置主題。 [不是JSON數據]

var chart; 
var chartData = []; 
var chartCursor; 
var day = 0; 
var firstDate = new Date(); 
firstDate.setDate(firstDate.getDate() - 500); 

// generate some random data, quite different range 
function generateChartData() { 
    for (day = 0; day < 50; day++) { 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + day); 

     var visits = Math.round(Math.random() * 40) - 20; 

     chartData.push({ 
      date: newDate, 
      visits: visits 
     }); 
    } 
} 

// create chart 
AmCharts.ready(function() { 
    // generate some data first 
    generateChartData(); 
    // SERIAL CHART  
    chart = new AmCharts.AmSerialChart(); 
    chart.pathToImages = "http://www.amcharts.com/lib/images/"; 
    chart.marginTop = 0; 
    chart.marginRight = 10; 
    chart.autoMarginOffset = 5; 
    chart.zoomOutButton = { 
     backgroundColor: '#000000', 
     backgroundAlpha: 0.15 
    }; 
    chart.dataProvider = chartData; 
    chart.categoryField = "date"; 

    // AXES 
    // category 
    var categoryAxis = chart.categoryAxis; 
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
    categoryAxis.dashLength = 1; 
    categoryAxis.gridAlpha = 0.15; 
    categoryAxis.axisColor = "#DADADA"; 

    // value     
    var valueAxis = new AmCharts.ValueAxis(); 
    valueAxis.axisAlpha = 0.2; 
    valueAxis.dashLength = 1; 
    chart.addValueAxis(valueAxis); 

    // GRAPH 
    var graph = new AmCharts.AmGraph(); 
    graph.title = "red line"; 
    graph.valueField = "visits"; 
    graph.bullet = "round"; 
    graph.bulletBorderColor = "#FFFFFF"; 
    graph.bulletBorderThickness = 2; 
    graph.lineThickness = 2; 
    graph.lineColor = "#b5030d"; 
    graph.negativeLineColor = "#0352b5"; 
    graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection 
    chart.addGraph(graph); 

    // CURSOR 
    chartCursor = new AmCharts.ChartCursor(); 
    chartCursor.cursorPosition = "mouse"; 
    chart.addChartCursor(chartCursor); 

    // SCROLLBAR 
    var chartScrollbar = new AmCharts.ChartScrollbar(); 
    chartScrollbar.graph = graph; 
    chartScrollbar.scrollbarHeight = 40; 
    chartScrollbar.color = "#FFFFFF"; 
    chartScrollbar.autoGridCount = true; 
    chart.addChartScrollbar(chartScrollbar); 

    // WRITE 
    chart.write("chartdiv"); 

    // set up the chart to update every second 
    setInterval(function() { 
     // normally you would load new datapoints here, 
     // but we will just generate some random values 
     // and remove the value from the beginning so that 
     // we get nice sliding graph feeling 

     // remove datapoint from the beginning 
     chart.dataProvider.shift(); 

     // add new one at the end 
     day++; 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + day); 
     var visits = Math.round(Math.random() * 40) - 20; 
     chart.dataProvider.push({ 
      date: newDate, 
      visits: visits 
     }); 
     chart.validateData(); 
    }, 1000); 
}); 

訪問"http://extra.amcharts.com/tutorials/themes/amcharts/themes/dark.js「我嘗試設置與此訪"http://www.amcharts.com/tutorials/working-with-themes/ "的參考主題,但I \我沒有得到預期的結果。我在做什麼錯誤?請給我建議的解決方案,這樣我可以糾正我的錯誤。

+0

當你發佈的jsfiddle,只是不張貼你需要添加代碼的鏈接在這個問題上 – 2014-09-01 06:36:25

+0

好吧,我不知道這一點。謝謝你幫我發表這個問題 – user3335796 2014-09-01 06:51:00

回答

3

問題:

1)使用的是它不支持主題amcharts的V2; 2)路徑的主題文件是錯誤的 3)您沒有設置任何地方的主題

固定小提琴:http://jsfiddle.net/ATQUm/830/

腳本包括:

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script> 
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script> 
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script> 

主題行:

AmCharts.theme = AmCharts.themes.dark;