滾動條的圖像在Amcharts中沒有正確顯示

我在Amcharts中創建了一個折線圖，並且正在使用滾動條來允許用戶在圖表中滾動。理想情況下，我想對滾動條的圖像的jsfiddle展現出來，但出於某種奇怪的原因，他們展示了這樣的：滾動條的圖像在Amcharts中沒有正確顯示

時實際上他們應該是這樣的：

這是此圖表的代碼的JavaScript部分：

var chart; 

AmCharts.theme = AmCharts.themes.light; 

AmCharts.ready(function() { 
// SERIAL CHART 
chart = new AmCharts.AmSerialChart(); 
chart.dataProvider = generateChartData(); 
chart.categoryField = "date"; 
chart.marginRight = 0; 
chart.marginTop = 0; 
chart.autoMarginOffset = 0; 
chart.angle = 0; 
chart.dataDateFormat = "YYYY-MM-DD"; 
chart.pathToImages = "https://www.amcharts.com/lib/images/"; 
chart.fontFamily = "Helvetica"; 
chart.fontSize = 14; 

// AXES 
// category 
var categoryAxis = chart.categoryAxis; 
categoryAxis.labelRotation = 60; 
categoryAxis.gridPosition = "start"; 
categoryAxis.dashLength = 1; 
categoryAxis.parseDates = true; 
categoryAxis.equalSpacing = false; 
categoryAxis.minorGridEnabled = true; 
// categoryAxis.dateFormats = [{period:'DD',format:'MM DD YYYY'}]; 
categoryAxis.boldPeriodBeginning = true; 
categoryAxis.markPeriodChange = false; 

// value 
var valueAxis = new AmCharts.ValueAxis(); 
valueAxis.title; 
valueAxis.dashLength = 10; 
chart.addValueAxis(valueAxis); 

// GRAPH    
var graphEnrolled = new AmCharts.AmGraph(); 
graphEnrolled.valueField = "value"; 
graphEnrolled.colorField = "color"; 
graphEnrolled.balloonText = "[[category]]: [[value]]"; 
graphEnrolled.type = "smoothedLine"; 
graphEnrolled.lineAlpha = 2; 
graphEnrolled.fillAlphas = 0; 
chart.addGraph(graphEnrolled); 

var scrollbar = new AmCharts.ChartScrollbar(); 
scrollbar.scrollbarHeight = 5; 
chart.addChartScrollbar(scrollbar); 
scrollbar.graph = graphEnrolled; 

var cursor = new AmCharts.ChartCursor(); 
cursor.cursorPosition = "mouse"; 
cursor.pan = true; 
cursor.valueLineEnabled = true; 
cursor.valueLineBalloonEnabled = true; 
chart.addChartCursor(cursor); 

//var graphExpected = new AmCharts.AmGraph(); 
//graphExpected.valueField = "value2"; 
//graphExpected.colorField = "color"; 
//graphExpected.balloonText = "[[category]]: [[value]]"; 
//graphExpected.type = "smoothedLine"; 
//graphExpected.lineAlpha = 2; 
//graphExpected.fillAlphas = 0; 
//chart.addGraph(graphExpected); 

// WRITE 

chart.exportConfig = 
{ 
    menuRight: '20px', 
    menuBottom: '50px', 
    menuItems: [{ 
     icon:'https://www.amcharts.com/lib/3/images/export.png', 
     format: 'png' 
     }] 
    } 

chart.write("chartdiv"); 
}); 

function addRow() { 
jQuery('<div class="data-row"><input class="data-cell data-category" value="YYYY-MM-DD" type="date"/><input class="data-cell data-value" value="0" type="number" step="1"/><input class="data-cell data-value" value="0" type="number" step="1"/><input class="data-button delete-button" type="button" value="X"/></div>').appendTo('#data-table').each(function() {initRowEvents(jQuery(this));}); 
} 

function generateChartData() { 
var chartData = []; 
jQuery('.data-row').each(function() { 
    var date = jQuery(this).find('.data-category').val(); 
    var value = jQuery(this).find('.data-value').val(); 
    //var value2 = jQuery(this).find('data-value').val(); 
    if (date != '') { 
     chartData.push({ 
      date: date, 
      value: value, 
      //value: value2 

     }); 
    } 
}); 
return chartData; 
} 

function initRowEvents(scope) { 
scope.find('.data-cell') 
    .attr('title', 'Click to edit') 
    .on('keypress keyup change', function() { 
     // re-generate chart data and reload it in chart 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    }).end().find('.delete-button').click(function() { 
     // remove the row 
     $(this).parents('.data-row').remove(); 

     // re-generate chart data and reload it in chart 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    }); 
} 

jQuery(function() { 
// initialize the table 
initRowEvents(jQuery(document)); 
}); 

chart.addListener("rendered", zoomChart); 

zoomChart(); 
function zoomChart(){ 
//chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1); 
chart.zoomToIndexes(0, 20); 
}

Here is the jsfiddle for this project

來源

2016-06-28 Sufi Iman

您在pathToImages有一個錯誤：

chart.pathToImages = "https://www.amcharts.com/lib/images/";

應該是：

chart.pathToImages = "https://www.amcharts.com/lib/3/images/";

或者更好的是，簡單的刪除了這一行。該圖表將自行找到其圖像。

https://jsfiddle.net/tsox1p8x/10/

來源

2016-06-28 22:23:33 martynasma

滾動條的圖像在Amcharts中沒有正確顯示

回答

相關問題