在堆积图表中显示负值(amchart)

时间:2016-05-01 22:28:22

标签: javascript amcharts

在下面的例子中,X = X1 + X2 + X3的值,我想在零轴下方显示负X3。此外,在计算百分比值时,似乎不考虑X3的负值。例如,对于2001年,X1,X2和X3的百分比值分别计算为70,20和-10。但是,我希望它们是(100 *(70 /(70 + 20-10))%(87.5%),(100 *(20 /(70 + 20-10))%(25%)和(100) *( - 10 /(70 + 20-10))%( - 12.5%)。

示例:https://jsfiddle.net/831g79xp/1/

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight":30,
    "legend": {
        "equalWidths": false,
        "periodValueText": "total: [[value.sum]]",
      "valueText": "[[value]] ([[percents]]%)",
        "position": "top",
        "valueAlign": "left",
        "valueWidth": 100
    },
    "dataProvider": [
{
        "year": 2001,
        "X1": 70,
        "X2": 20,
        "X3": -10,
     }, {
         "year": 2002,
   "X1": 80,
        "X2": 15,
        "X3": -20,
    }, {
        "year": 2003,
    "X1": 90,
        "X2": 20,
        "X3": -25,
    }],
    "valueAxes": [{
        "stackType": "regular",
        "gridAlpha": 0.07,
        "position": "left",
        "title": "X Components"
    }],
    "graphs": [{
         "balloonText":"<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "lineAlpha": 0.4,
        "title": "X1",
        "valueField": "X1"
    }, {
        "balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "lineAlpha": 0.4,
        "title": "X2",
        "valueField": "X2"
    }, {
        "balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "lineAlpha": 0.4,
        "title": "X3",
        "valueField": "X3"
    }
],
    "plotAreaBorderAlpha": 0,
    "marginTop": 10,
    "marginLeft": 0,
    "marginBottom": 0,
    "chartScrollbar": {},
    "chartCursor": {
        "cursorAlpha": 0
    },
    "categoryField": "year",
    "categoryAxis": {
        "startOnAxis": true,
        "axisColor": "#DADADA",
        "gridAlpha": 0.07,
        "title": "Year" 
    },
    "export": {
        "enabled": true
     }
});

0 个答案:

没有答案