如何为动画 amcharts 时间线饼图提供多个值字段？

Question

的气球文本中显示多个值

代码如下：

function pushvalue(curyear,curmonth,monvalue,state,statecount){
array.push({year: curyear, month: curmonth, count: monvalue, state: state, statecount: statecount});
}

var monthNames = ["January", "February","March", "April", "May", "June","July", "August", "September", "October", "November", "December”];
var currentYear = 1997;
var array = [];

for (var i = 0; i < 4; ++i) {
for (var j = 0; j < 12; ++j) {
pushvalue(currentYear + i, monthNames[j],count[j],state[j],statecount[j]);
}
}

var chartData = {};
for (var i = 0; i < array.length; ++i) {
  if (!chartData[array[i].year]) {
    chartData[array[i].year] = [];
  }
  chartData[array[i].year].push({"Month": array[i].month, "Count": array[i].count, “State”: array[i].state, “StateCount”: array[i].statecount });
}

var currentYear = 1997;
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "Count",
  “valueField1”: “State”,
  “valueField2”: “StateCount”,
  "titleField": "Month",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "marginTop": 30,
“balloonText”: “Completed [[value2]] for [[value1]] states in [[title]] month”,
“labelText”: “[[title]] - [[value]]”,
  "titles": [{
    "text": "Test chart"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#555"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Year",
    "color": "#555"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

  function getCurrentData() {
    var data = chartData[currentYear];
    currentYear++;
    if (currentYear > 2000)
      currentYear = 1997;
    return data;
  }

  function loop() {
    chart.allLabels[0].text = currentYear;
    var data = getCurrentData();
    chart.animateData( data, {
      duration: 1000,
      complete: function() {
        setTimeout( loop, 3000 );
      }
    } );
  }

  loop();
}
  } ],
    } );

我希望在加载饼图时将 valueField、valueField1 和 valueField2 显示在 balloonText 和 labelText 中。

但是图表在加载时显示为空白，因为它没有读取 valueField1 和 valueField2。我知道我在分配 valueField1 和 valueField2 时犯了一些错误。有人可以帮我修好吗我可以知道如何让图表显示 chartData.state 和 chartData.statecount 中的值吗？

谢谢！

PS 这是的延续

中分配的值

for (var i = 0; i < 4; ++i) {
for (var j = 0; j < 12; ++j) {
pushvalue(currentYear + i,monthNames[j],count[j],state[j],statecount[j]);
}
}

不是实际的产品代码。

Answer 1

您不能在饼图中设置多个值字段，但您可以通过 [[shortcodes]] 按名称引用字段，即 [[State]] 和 [[StateCount]]，如 balloonText and labelText 文档（强调我的）：

The following tags can be used: [[value]], [[title]], [[percents]], [[description]] or any other field name from your data provider.

您的 balloonText 应如下所示：

"balloonText": "Completed [[State]] for [[StateCount]] states in [[title]] month",

相应地调整您的 labelText。

Demo

如何为动画 amcharts 时间线饼图提供多个值字段？

How to provide multiple valuefields to Animated amcharts timeline pie chart?

javascript

amcharts