AmCharts - 帮助创建趋势栏

时间:2016-11-03 03:47:40

标签: javascript amcharts

我正在尝试按照有关如何在我的序列号条形图上添加趋势线的文档进行操作。

AmCharts.makeChart('chartdiv', {
      type: 'serial',
      addClassNames: true,
      theme: 'light',
      dataProvider: data,
      startDuration: 1,
      categoryField: 'month',
      graphs: [
        {
          valueField: 'complaints',
          type: 'column',
          fillAlphas: 0.8,
          balloonText: "# of complaints on [[category]]: <b>[[value]]</b>"
        },
        {
          valueField: 'expectation',
          type: 'line',
          // bullet: 'round',
          lineColor: 'green',
          balloonText: "Expected less than <b>[[value]]</b> for [[category]]",
          dashLengthField: "dashLengthLine"
        }
      ],
      categoryAxis: {
        autoGridCount: false,
        gridCount: data.length,
        gridPosition: "start",
        // labelRotation: 90
      },
      export: {
        enabled: true
      },

      trendLines: [{
            initialValue: 6,
            finalValue: 8
        }]
    });

trendingLines在那里做得不多。我已经尝试过很多方式宣布它,但没有运气。以下是我正在使用的一些数据:

[{
    "expectation": 2,
    "tendValue": 1,
    "month": "January",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "February",
    "complaints": 2
  }, {
    "expectation": 2,
    "month": "March",
    "complaints": 0
  }, {
    "expectation": 2,
    "month": "April",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "May",
    "complaints": 0
  }, {
    "expectation": 2,
    "month": "June",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "July",
    "complaints": 2
  }, {
    "expectation": 2,
    "month": "August ",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "September",
    "complaints": 3
  }, {
    "expectation": 2,
    "month": "October",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "November",
    "complaints": 2
  }, {
    "expectation": 2,
    "tendValue": 3,
    "month": "December",
    "complaints": 3
  } ]

1 个答案:

答案 0 :(得分:1)

您错过的是开始和结束点的声明。您只能告诉趋势线其值。

趋势线的最小代码应该是......像这样:

{
    "finalDate": "2012-01-22 12",
    "finalValue": 10,
    "initialDate": "2012-01-17 12",
    "initialValue": 16
}

或在您的情况下使用initialCategoryfinalCategory。有关趋势线参数的更多信息,请查看class reference或查看这个漂亮的小demo