Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 计算highcharts中每个系列的百分比值_Javascript_Highcharts_Jsfiddle - Fatal编程技术网

Javascript 计算highcharts中每个系列的百分比值

Javascript 计算highcharts中每个系列的百分比值,javascript,highcharts,jsfiddle,Javascript,Highcharts,Jsfiddle,我试图计算每个系列的%值,我设法找到的是类似函数的值 formatter:function() { var pcnt = (this.y / dataSum) * 100; return Highcharts.numberFormat(pcnt) + '%'; } 但让我困惑的是,我如何动态地创建这个函数,以便它可以应用于提供的每个serie对象 从上面的函数中强调dataSum。

我试图计算每个系列的%值,我设法找到的是类似函数的值

 formatter:function() {
                    var pcnt = (this.y / dataSum) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
但让我困惑的是,我如何动态地创建这个函数,以便它可以应用于提供的每个serie对象

从上面的函数中强调dataSum。 我试着用谷歌搜索,以防highcharts在其文档中已经提供了一些解决方案,但遗憾的是,我没有找到任何东西,我发现的唯一一件事是将已经提供的值与+'%'连接起来,这远远超出了特定系列百分比的实际值

$(function() {
  var chart = new Highcharts.Chart(



  {
  "meta": {
    "drilldownEnabled": false
  },
  "chart": {
  renderTo:"container",
    "additionalData": {
      "dateTime": false,
      "datetype": "string",
      "cliccable": true,
      "drillable": false,
      "drillableChart": false,
      "isCockpit": true,
      "categoryColumn": "city",
      "categoryGroupBy": "",
      "categoryGroupByNamens": "",
      "categoryName": "city",
      "categoryOrderColumn": "",
      "categoryOrderType": "",
      "categoryStacked": "",
      "categoryStackedType": ""
    },
    "zoomType": "xy",
    "panning": true,
    "type": "column",
    "options3d": {
      "enabled": false,
      "alpha": 25,
      "beta": 15,
      "depth": 50,
      "viewDistance": 25
    },
    "backgroundColor": "#FFFFFF",
    "heightDimType": "pixels",
    "widthDimType": "pixels",
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "borderColor": "#FFFFFF",
    "style": {
      "backgroundColor": "#FFFFFF",
      "fontFamily": "",
      "fontWeight": "",
      "fontSize": ""
    },
    "events": {}
  },
  "colors": [
    "#7cb5ec",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#e4d354",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ],
  "title": {
    "text": "",
    "style": {
      "align": "",
      "color": "",
      "fontFamily": "",
      "fontSize": "",
      "fontWeight": ""
    }
  },
  "legend": {
    "itemDistance": 0,
    "symbolPadding": 25,
    "enabled": false
  },
  "xAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "type": "category",
      "id": 0,
      "title": {
        "customTitle": false,
        "text": "city",
        "style": {}
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      }
    }
  ],
  "yAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0,
          "zIndex": 1
        }
      ],
      "title": {
        "text": "",
        "customTitle": false,
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": ""
        }
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      },
      "gridLineDashStyle": "$convertedTypeline",
      "minorGridLineDashStyle": "$convertedMinorTpeline"
    }
  ],
  "series": [
    {
      "name": "total_children",
      "dataLabels": {

        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [

        {
          "drilldown": false,
          "y": 271,
          "name": "Pomona",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 237,
          "name": "Port Hammond",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 205,
          "name": "Port Orchard",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 239,
          "name": "Portland",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 265,
          "name": "Puyallup",
          "datetype": "string"
        },

      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    },
    {
      "name": "num_cars_owned",
      "dataLabels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [
        {
          "drilldown": false,
          "y": 228,
          "name": "Acapulco",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 189,
          "name": "Albany",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 212,
          "name": "Altadena",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 219,
          "name": "Anacortes",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 231,
          "name": "Arcadia",
          "datetype": "string"
        },

      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    }
  ],
  "tooltip": {
    "borderWidth": 0,
    "borderRadius": 0,
    "followTouchMove": false,
    "followPointer": true,
    "useHTML": true,
    "backgroundColor": null,
    "style": {
      "padding": 0
    }
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "fontFamily": "",
      "fontSize": "",
      "color": ""
    },
    "position": {
      "align": "center",
      "verticalAlign": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "line": {
      "marker": {
        "symbol": "circle",
        "lineWidth": 2
      }
    },
    "series": {
      "events": {},
      "showCheckbox": true,
      "cursor": "pointer",
      "point": {
        "events": {}
      },
      "dataLabels": {
        "allowOverlap": true
      },
      "turboThreshold": 2000
    }
  }
}










  );
});
在任何情况下,是否有人使用过提供%系列值的解决方案?
我正试图计算总子女数的%,以及拥有serie的汽车数的%,因为它们是serie数组中的分离对象


您可以在此处的链接上找到代码示例

您需要计算
dataSum
值:

        tooltip: {
            ...,
            formatter: function() {
                var dataSum = 0,
                    pcnt;

                this.series.points.forEach(function(point) {
                    dataSum += point.y;
                });

                pcnt = (this.y / dataSum) * 100;

                return Highcharts.numberFormat(pcnt) + '%';
            }
        }
现场演示:


API参考资料:

你想显示的百分比是多少?我想计算的是孩子总数的%,以及拥有的汽车数量的%,非常感谢!