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

I'm creating a line graph in Amcharts and am using a scrollbar to allow the user to scroll across the graph. Ideally, I'd like the images for the scrollbar to show up in jsfiddle, but for some weird reason they're showing up like this:

我正在Amcharts中创建一个折线图,并使用滚动条允许用户滚动图表。理想情况下,我希望滚动条的图像显示在jsfiddle中,但出于某种奇怪的原因,它们会像这样出现:

when really they should look like this:

什么时候真的应该是这样的:

This is the JavaScript portion of the code for this chart:

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

这是这个项目的jsfiddle

1 个解决方案

#1

You have an error in pathToImages:

您在pathToImages中有错误:

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

Should be:

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

Or better yet, simple remove that line. The chart will find its images on its own.

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

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

#1