2014-09-01 4 views
1

Я разработал мобильное приложение, которое отображает линейный график с использованием amcharts. Я привел пример этой ссылки, пожалуйста, посетите http://jsfiddle.net/ATQUm/825/ и разработал мое приложение. Теперь я застрял в настройке тем. Он содержит различные темы, такие как «темный», «легкий», «мел» и т. Д. У каждого из них есть собственный JS. В качестве примера i m присоединяется ссылка dark.js.Настройка тем для диаграмм с использованием amcharts. [not JSON data]

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/ " но я \ я не получаю ожидаемый результат. То, что ошибка я делаю? Пожалуйста, предложите мне решение, так что я мог исправить свою ошибку.

+0

когда вы размещаете jsfiddle, просто не разместить ссылку вам нужно добавить код в вопросе также –

+0

Хорошо, я не знал об этом. Спасибо, что помогли мне опубликовать этот вопрос. – user3335796

ответ

3

проблема:

1) вы используете v2 из amcharts, который не поддерживает тему; 2) путь к файлу тема неправильно 3) вы не установили тему в любом месте

.

Fixed скрипку: 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;