Javascript Amcharts使用项目符号图表对stackbyvalue进行排序

Javascript Amcharts使用项目符号图表对stackbyvalue进行排序,javascript,jquery,amcharts,Javascript,Jquery,Amcharts,我正在使用amcharts的stackByValue来排列堆栈柱形图。我想在每个图表上添加一个要点,以检查它们是否达到某个目标。目前的情况是将项目符号添加到堆叠图表中,有没有一种方法可以在不删除stackByValue的情况下执行此操作 这是我的JSFIDLE:` $(文档).ready(函数(){ addInitHandler(函数(图表){ //检查是否启用 如果(chart.valueAxes==undefined | | | chart.valueAxes.length==0 | | |

我正在使用amcharts的stackByValue来排列堆栈柱形图。我想在每个图表上添加一个要点,以检查它们是否达到某个目标。目前的情况是将项目符号添加到堆叠图表中,有没有一种方法可以在不删除stackByValue的情况下执行此操作

这是我的JSFIDLE:`

$(文档).ready(函数(){
addInitHandler(函数(图表){
//检查是否启用
如果(chart.valueAxes==undefined | | | chart.valueAxes.length==0 | | |!chart.valueAxes[0]。stackByValue)
返回;
//禁用内置堆叠
chart.valueAxes[0].stackType=“无”;
//准备所有图表
对于(var i=0;i”,
“标签位置”:“中间”,
“lineAlpha”:0.3,
“标题”:关键,
“类型”:“列”,
“颜色”:“000000”,
//“showAllValueLabels”:正确,
“valueField”:键
});
}
如果(键==“目标”){
graphsArray.push({
“文本”:“[[value]]”,
“气球功能”:功能(项目、图形){
var result=graph.text;
for(item.dataContext中的var键){
if(item.dataContext.hasOwnProperty(key)&&&!isNaN(item.dataContext[key])){
var formatted=AmCharts.formatNumber(item.dataContext[key]{
精度:图表,精度,
小数分隔符:chart.decimalSeparator,
千分之二:图表。千分之二
}, 2);
结果=结果。替换(“[[”+键+“]]”,格式化);
}
}
返回结果;
},
“valueAxis”:“v2”,
“lineAlpha”:0,
“子弹”:“圆形”,
“bulletSize”:20,
“标题”:“目标”,
“类型”:“行”,
“valueField”:“目标”
});
}
返回图形数组;
}, []);
var chart=AmCharts.makeChart(“chartdiv”{
“类型”:“串行”,
“主题”:“光”,
“传奇”:{
“水平差距”:10,
“maxColumns”:1,
“位置”:“正确”,
“useGraphSettings”:正确,
“标记化”
$(document).ready(function() {
    AmCharts.addInitHandler(function(chart) {
        // Check if enabled
        if (chart.valueAxes === undefined || chart.valueAxes.length === 0 || !chart.valueAxes[0].stackByValue)
            return;

        // Disable built-in stacking
        chart.valueAxes[0].stackType = "none";

        // Prepare all graphs
        for (var i = 0; i < chart.graphs.length; i++) {
            var graph = chart.graphs[i];
            graph.originalValueField = graph.valueField;
            graph.valueField = graph.originalValueField + "Close";
            graph.openField = graph.originalValueField + "Open";
            graph.clustered = false;
            if (graph.labelText)
                graph.labelText = graph.labelText.split("[[value]]").join("[[" + graph.originalValueField + "]]");
            if (graph.balloonText)
                graph.balloonText = graph.balloonText.split("[[value]]").join("[[" + graph.originalValueField + "]]");
        }

        // Go through each category and order values
        for (var i = 0; i < chart.dataProvider.length; i++) {

            // Assemble intermediate array of data point items
            var dp = chart.dataProvider[i];
            var items = [];
            var sum = 0;
            for (var x = 0; x < chart.graphs.length; x++) {
                var graph = chart.graphs[x];
                items.push({
                    "graph": graph,
                    "value": dp[graph.originalValueField]
                });
            }

            var sortValue = 0;

            // Order according to value
            items.sort(function(a, b) {
                if (sortValue == 0) {

                    return a.value - b.value;
                } else {

                    return b.value - a.value;
                }

            });

            // Calculate open and close fields
            var offset = 0;
            for (var x = 0; x < items.length; x++) {
                var item = items[x];
                dp[item.graph.openField] = offset;
                dp[item.graph.valueField] = offset + dp[item.graph.originalValueField];
                offset = dp[item.graph.valueField];
            }
        }
    }, ["serial"]);

    var response = [{
        "name": "Jan",
        "target": 2062186.74,
        "USA": 0,
        "MAN": 605873.95,
        "PAN": 759763.5
    }, {
        "name": "Feb",
        "target": 1492210.81,
        "MAN": 499538.43,
        "PAN": 559504.95,
        "USA": 5850
    }, {
        "name": "Mar",
        "target": 1455750,
        "MAN": 403715.2,
        "PAN": 694353.95,
        "USA": 0
    }, {
        "name": "Apr",
        "target": 2008623.96,
        "USA": 0,
        "MAN": 409993.3,
        "PAN": 511030
    }];

    var graphs = Object.keys(response[0]).reduce(function(graphsArray, key) {
        if (key !== "name" && key !== "target") {
            graphsArray.push({
                "balloonText": "<b>[[value]]</b>",
                "balloonFunction": function(item, graph) {
                    var result = graph.balloonText;
                    for (var key in item.dataContext) {
                        if (item.dataContext.hasOwnProperty(key) && !isNaN(item.dataContext[key])) {
                            var formatted = AmCharts.formatNumber(item.dataContext[key], {
                                precision: chart.precision,
                                decimalSeparator: chart.decimalSeparator,
                                thousandsSeparator: chart.thousandsSeparator
                            }, 2);
                            result = result.replace("[[" + key + "]]", formatted);
                        }
                    }
                    return result;
                },
                "fillAlphas": 0.8,
                "labelText": "[[title]]<br>",
                "labelPosition": "middle",
                "lineAlpha": 0.3,
                "title": key,
                "type": "column",
                "color": "#000000",
                //"showAllValueLabels": true,
                "valueField": key
            });
        }
        if (key === "target") {
            graphsArray.push({
                "balloonText": "<b>[[value]]</b>",
                "balloonFunction": function(item, graph) {
                    var result = graph.balloonText;
                    for (var key in item.dataContext) {
                        if (item.dataContext.hasOwnProperty(key) && !isNaN(item.dataContext[key])) {
                            var formatted = AmCharts.formatNumber(item.dataContext[key], {
                                precision: chart.precision,
                                decimalSeparator: chart.decimalSeparator,
                                thousandsSeparator: chart.thousandsSeparator
                            }, 2);
                            result = result.replace("[[" + key + "]]", formatted);
                        }
                    }
                    return result;
                },
                "valueAxis": "v2",
                "lineAlpha": 0,
                "bullet": "round",
                "bulletSize": 20,
                "title": "target",
                "type": "line",

                "valueField": "target"
            });
        }
        return graphsArray;
    }, []);

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "light",
        "legend": {
            "horizontalGap": 10,
            "maxColumns": 1,
            "position": "right",
            "useGraphSettings": true,
            "markerSize": 10
        },
        "numberFormatter": {
            "precision": 1,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
        "dataProvider": response,
        "valueAxes": [{
            "id": "v1",
            "stackType": "regular",
            /**
             * A proprietary setting `stackByValue` which is not an
             * official config option. It will be used by our custom
             * plugin
             */
            "stackByValue": true,
            "axisAlpha": 0.3,
            "gridAlpha": 0
        }, , {
            "id": "v2",
            "axisAlpha": 0.3,
            "gridAlpha": 0,
            "position": "top",

            "title": "Target"
        }],
        "gridAboveGraphs": true,
        "startDuration": 0,
        "graphs": graphs,
        "categoryField": "name",
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        },
        "export": {
            "enabled": true
        }

    });

    console.log(graphs);
    console.log(response);

    Object.keys(response[0]).forEach(key => {
        console.log(key) // returns the keys in an object
        // console.log(a[key])  // returns the appropriate value 
    })
});
  // Go through each category and order values
  for (var i = 0; i < chart.dataProvider.length; i++) {

    // ...
    for (var x = 0; x < chart.graphs.length; x++) {
      var graph = chart.graphs[x];
      items.push({
        "graph": graph,
        // check if this graph's data points need to be omitted from the sorting process.
        "ignoreSort": (graph.valueAxis && graph.valueAxis !== chart.valueAxes[0].id),
        "value": dp[graph.originalValueField]
      });
    }

    // ...

    // Calculate open and close fields
    var offset = 0;
    for (var x = 0; x < items.length; x++) {
      var item = items[x];

      if (!item.ignoreSort) {
        //process the pont as normal if it doesn't have the flag set with open/value fields
        dp[item.graph.openField] = offset;
        dp[item.graph.valueField] = offset + dp[item.graph.originalValueField];
        offset = dp[item.graph.valueField];
      } else {
        //otherwise treat the point as a normal graph and use the value field
        dp[item.graph.valueField] = dp[item.graph.originalValueField]
      }

    }
  }
//synchronizes axes' min/max values using a custom synchronizeValueAxes property
//(while synchronizeGrid exists, it doesn't work with this particular chart)
AmCharts.addInitHandler(function(chart) {
  if (chart.synchronizeValueAxes) {
    setTimeout(function() {
      var max = chart.valueAxes.reduce(function(max, axis) {
        if (!isNaN(axis.max)) {
          return Math.max(max, axis.max);
        } else {
          return max;
        }
      }, Number.MIN_VALUE);
      var min = chart.valueAxes.reduce(function(min, axis) {
        if (!isNaN(axis.min)) {
          return Math.min(min, axis.min);
        } else {
          return min;
        }

      }, Number.MAX_VALUE);

      chart.valueAxes.forEach(function(axis) {
        axis.maximum = max;
        axis.minimum = min;
        axis.strictMinMax = true;
      });
      chart.validateData();
    }, 500);
  }

}, ["serial"]);