Question

我正在与Angular 4和AmCharts合作开展一个项目。我需要在图表的左上角显示一个简单的标签。

图表的配置代码如下：

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
    }
  });

不幸的是，标签和正如您在屏幕截图中看到的图表标题一样，不显示。有人可以帮我这个吗？感谢您的支持！

仅供参考：我隐藏了对此问题不重要的部分配置代码。

Answer 1

allLabels和titles在AmCharts股票图表中设置为panel级别，而不是顶级。只需移动这些定义，它们就可以工作。

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>

另请注意，面板也有一个title属性，它将在图表区域的顶部而不是在其中呈现，但需要stockLegend才能使其生效。< / p>

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

1 个答案: