时间戳

首页 > 解决方案 > Highcharts 将小数的 numberformat 设置为逗号

highcharts - Highcharts 将小数的 numberformat 设置为逗号

问题描述

我有一个人口金字塔的数据集，我使用 highcharts，但我对小数运算符有一些问题。Highcharts 接受分隔符为“。” 但是数据集有“，”所以在逗号之后它被视为一个新值。我的意思是，对于“5,12”，它不接受 5.12，它分别接受 5、12 两个值。我该如何解决这个问题？（我不能将“，”更改为“。”，因为它取自数据库）。 

    <script>
    {% for item in dataset %}

        // Age categories
        var categories = [
          '0-4', '5-9', '10-14', '15-19',
          '20-24', '25-29', '30-34', '35-39', '40-44',
          '45-49', '50-54', '55-59', '60-64', '65-69',
          '70-74', '75-79', '80-84', '85-89', '90+'
        ];

        Highcharts.chart('container', {
          chart: {
            type: 'bar'
          },
          title: {
            text: 'POPULATION PYRAMID'
          },
          subtitle: {
            text: 'Source: <a href="#">#</a>'
          },
          xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
              step: 1
            }
          }, { // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
              step: 1
            }
          }],
          yAxis: {
            title: {
              text: null
            },
            labels: {
              formatter: function () {
                return Math.abs(this.value) + '%';
              }
            }
          },

          plotOptions: {
            series: {
              stacking: 'normal'
            }
          },

          tooltip: {
            formatter: function () {
              return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y),
            }
          },

         series: [{
            name: 'Men',
            data: [
              -{{ item.men_population_0_4_percentage }},
              -{{ item.men_population_5_9_percentage }},
              -{{ item.men_population_10_14_percentage }},
              -{{ item.men_population_15_19_percentage }},
              -{{ item.men_population_20_24_percentage }},
              -{{ item.men_population_25_29_percentage }},
              -{{ item.men_population_30_34_percentage }},
              -{{ item.men_population_35_39_percentage }},
              -{{ item.men_population_40_44_percentage }},
              -{{ item.men_population_45_49_percentage }},
              -{{ item.men_population_50_54_percentage }},
              -{{ item.men_population_55_59_percentage }},
              -{{ item.men_population_60_64_percentage }},
              -{{ item.men_population_65_69_percentage }},
              -{{ item.men_population_70_74_percentage }},
              -{{ item.men_population_75_79_percentage }},
              -{{ item.men_population_80_84_percentage }},
              -{{ item.men_population_85_89_percentage }},
              -{{ item.men_population_90_over_percentage }},
            ]
          }, {
            name: 'Women',
            data: [
              {{ item.women_population_0_4_percentage }},
              {{ item.women_population_5_9_percentage }},
              {{ item.women_population_10_14_percentage }},
              {{ item.women_population_15_19_percentage }},
              {{ item.women_population_20_24_percentage }},
              {{ item.women_population_25_29_percentage }},
              {{ item.women_population_30_34_percentage }},
              {{ item.women_population_35_39_percentage }},
              {{ item.women_population_40_44_percentage }},
              {{ item.women_population_45_49_percentage }},
              {{ item.women_population_50_54_percentage }},
              {{ item.women_population_55_59_percentage }},
              {{ item.women_population_60_64_percentage }},
              {{ item.women_population_65_69_percentage }},
              {{ item.women_population_70_74_percentage }},
              {{ item.women_population_75_79_percentage }},
              {{ item.women_population_80_84_percentage }},
              {{ item.women_population_85_89_percentage }},
              {{ item.women_population_90_over_percentage }},
            ]
          }]


        });

    {% endfor %}
    </script>

当逗号设置为十进制分隔符时，值之间的逗号会出错，例如“{{ item.women_population_0_4_percentage }}, {{ item.women_population_5_9_percentage }}, ...”那么我该如何解决这个问题呢？

标签： highcharts

解决方案

您可以通过 JS 将逗号更改为点。例如：

var data = ['5,12', '10,4'];

data.forEach(function(el, i) {
    data[i] = parseFloat(el.replace(/,/g, '.'))
});

Highcharts.chart('container', {
    series: [{
        data: data
    }]
});

现场演示：http: //jsfiddle.net/BlackLabel/62b1vwje/

推荐阅读