为什么标签不显示在图表上？

Question

I'm working on a project with Angular 4 and AmCharts. I need to display a simple label on the chart, in the top left corner.

My config code for the chart is as follow:

this.chart = this.AmCharts.makeChart("chart", {
    type: "stock",
    theme: "light",
    addClassNames: true,
    fontFamily: "Teko",
    fontSize: 18,
    mouseWheelZoomEnabled: false,
    titles: [{
        bold: true,
        color: "#FF0000",
        text: "PCS/Min"
    }],
    allLabels: [{
        bold: true,
        text: "PCS/Min",
        color: "#000000",
        x: 20,
        y: 20
    }],
    dataSets: [{
        color: "#93B7BE",
        fieldMappings: [{
            fromField: "y",
            toField: "y"
        }],
        dataProvider: data,
        categoryField: "date",
    }],
    panels: [{
        title: "PCS/Min",
        stockGraphs: [{
            id: "g1",
            valueField: "y",
            lineThickness: 2,
            fillColors: "#ebfffb",
            fillAlphas: 0.1,
            periodValue: "Average"
        }],
        stockLegend: {
            enabled: false,
            valueTextRegular: "PCS/Min"
        }
    }],
    panelsSettings: {
        marginLeft: 25,
        marginRight: 25,
        marginTop: 0,
        marginBottom: 0
    }
  });

Unfortunately, the label and, as you can see on the screenshot, the title of the chart, do not display. Can anyone please help me with this? Thank you for the support!

FYI: I've hidden part of the config code that is not important for this question.

Answer 1

allLabels and titles are set at the panel level in an AmCharts Stock Chart, not at the top level. Just move those definitions down and they'll work.

 var data = [] generateChartData(); function generateChartData() { var firstDate = new Date(); firstDate.setHours(0, 0, 0, 0); firstDate.setDate(firstDate.getDate() - 2000); for (var i = 0; i < 2000; i++) { var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i); var value = Math.round(Math.random() * (30) + 100); data[i] = ({ "date": newDate, "y": value }); } } AmCharts.makeChart("chart", { type: "stock", theme: "light", addClassNames: true, fontFamily: "Teko", fontSize: 18, mouseWheelZoomEnabled: false, dataSets: [{ color: "#93B7BE", fieldMappings: [{ fromField: "y", toField: "y" }], dataProvider: data, categoryField: "date", }], panels: [{ title: "PCS/Min", titles: [{ bold: true, color: "#FF0000", text: "PCS/Min" }], allLabels: [{ bold: true, text: "PCS/Min", color: "#000000", x: 20, y: 20 }], stockGraphs: [{ id: "g1", valueField: "y", lineThickness: 2, fillColors: "#ebfffb", fillAlphas: 0.1, periodValue: "Average" }], stockLegend: { enabled: false, valueTextRegular: "PCS/Min" } }], panelsSettings: { marginLeft: 25, marginRight: 25, marginTop: 0, marginBottom: 0 } }); 

 #chart { width: 100%; height: 300px; } 

 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/amstock.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <div id="chart"></div> 

Also note that there is a title property for the panel as well which will render on top of the chart area rather than inside it, but it needs a stockLegend enabled for that to work.