如何为Animated amcharts timeline饼图提供多个valuefields?

时间:2017-10-16 18:54:28

标签: javascript amcharts

我想在Animated Time-Line Pie Chart

的balloontext中显示多个值

以下是代码:

import static org.mockito.Mockito.*;
import static org.junit.Assert.*;

@Test
public void test1()  {
        //  create mock
        MyClass test = mock(MyClass.class);

        // define return value for method createSoapCall()
        when(test.createSoapCall()).thenReturn(43);

        // use mock in test....
        assertEquals(test.createSoapCall(), 43);
}

我想要valueField,valueField1&在饼图加载时,valueTeield2将显示在balloonText和labelText中。

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

谢谢!

PS这是How to provide data to Animated time-line pie amcharts?的延续 在

中指定的值
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();
}
  } ],
    } );

不是实际的产品代码。

1 个答案:

答案 0 :(得分:0)

您不能在饼图中设置多个valueField,但您可以通过[[shortcodes]]按名称引用字段,即[[State]][[StateCount]],如{{3}所示}和balloonText文档(强调我的):

  

可以使用以下标记:[[value]],[[title]],[[percent]],[[description]] 或数据提供者的任何其他字段名称。< / EM>

您的balloonText应如下所示:

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

相应地调整labelText。

labelText