Javascript 滚动条的图像未在图表中正确显示

我正在Amcharts中创建一个折线图，并使用滚动条允许用户在该图上滚动。理想情况下，我希望滚动条的图像显示在JSFIDLE中，但出于某种奇怪的原因，它们显示为这样：

实际上，它们应该是这样的：

这是此图表代码的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);
}

var图；
AmCharts.theme=AmCharts.themes.light；
AmCharts.ready（函数（）{
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.dataProvider=generateChartData（）；
chart.categoryField=“日期”；
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.fontfaliam=“Helvetica”；
chart.fontSize=14；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.labelRotation=60；
categoryAxis.gridPosition=“开始”；
categoryAxis.dashLength=1；
categoryAxis.parseDates=true；
categoryAxis.equalspace=false；
categoryAxis.minorGridEnabled=true；
//categoryAxis.dateFormats=[{期间：'DD'，格式：'MM DD YYYY'}]；
categoryAxis.boldPeriodBeging=true；
categoryAxis.markPeriodChange=false；
//价值观
var valueAxis=新的AmCharts.valueAxis（）；
valueAxis.title；
valueAxis.dashLength=10；
图表.添加valueAxis（valueAxis）；
//图表
var graphEnrolled=new AmCharts.AmGraph（）；
graphEnrolled.valueField=“value”；
graphEnrolled.colorField=“color”；
graphEnrolled.ballootText=“[[category]]：[[value]]”；
graphEnrolled.type=“平滑线”；
graphEnrolled.lineAlpha=2；
graphEnrolled.fillAlphas=0；
图表。添加图表（图表滚动）；
var scrollbar=new AmCharts.chartsrollbar（）；
scrollbar.scrollbarHeight=5；
chart.addChartScrollbar（滚动条）；
scrollbar.graph=滚动的图形；
var cursor=new AmCharts.ChartCursor（）；
cursor.cursorPosition=“鼠标”；
cursor.pan=true；
cursor.valueLineEnabled=true；
cursor.valueLineBalloodEnabled=true；
chart.addChartCursor（游标）；
//var graphExpected=new AmCharts.AmGraph（）；
//graphExpected.valueField=“value2”；
//graphExpected.colorField=“color”；
//graphExpected.ballootText=“[[category]]：[[value]]”；
//graphExpected.type=“平滑线”；
//grapherpected.lineAlpha=2；
//GrapherExpected.fillAlphas=0；
//chart.addGraph（graphExpected）；
//写
chart.exportConfig=
{
menuRight:'20px'，
菜单底部：“50px”，
菜单项：[{
图标：'https://www.amcharts.com/lib/3/images/export.png',
格式：“png”
}]
}
chart.write（“chartdiv”）；
});
函数addRow（）{
jQuery（“”）.appendTo（“#数据表”）.each（函数（）{initRowEvents（jQuery（this））；}）；
}
函数generateChartData（）{
var chartData=[]；
jQuery（'.data行'）。每个（函数（）{
var date=jQuery（this.find（'.data category'）.val（）；
var value=jQuery（this.find（'.data value'）.val（）；
//var value2=jQuery（this.find（'data-value'）.val（）；
如果（日期！=''）{
chartData.push({
日期:日期:，
价值：价值，
//价值：价值2
});
}
});
返回图表数据；
}
函数initRowEvents（作用域）{
查找（“.data单元格”）
.attr（'title'，'Click to edit'）
.on（'keypress keyup change'，函数（）{
//重新生成图表数据并将其重新加载到图表中
chart.dataProvider=generateChartData（）；
chart.validateData（）；
}).end（）.find（'.delete按钮'）。单击（函数（）{
//删除该行
$（this）.parents（'.data行'）.remove（）；
//重新生成图表数据并将其重新加载到图表中
chart.dataProvider=generateChartData（）；
chart.validateData（）；
});
}
jQuery（函数（）{
//初始化表
initRowEvents（jQuery（文档））；
});
chart.addListener（“呈现”，zoomChart）；
zoomChart（）；
函数zoomChart（）{
//chart.zoomtoIndex（chart.dataProvider.length-40，chart.dataProvider.length-1）；
图表.动物指数（0,20）；
}

---

您在

路径图像中有一个错误

：

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

应该是：

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

或者更好的办法是，简单地去掉这条线。图表将自行找到其图像