javascript - 滚动条的图像未在 Amcharts 中正确显示

Question

我正在 Amcharts 中创建折线图，并使用滚动条允许用户在图中滚动。理想情况下，我希望滚动条的图像显示在 jsfiddle 中，但由于某些奇怪的原因，它们显示如下:

什么时候他们应该看起来像这样:

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

Answer 1

pathToImages 有错误:

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

应该是:

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

或者更好的是，简单地删除该行。图表将自行查找其图像。

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