【问题标题】:How could I sort each group of columns from low to high如何从低到高对每组列进行排序
【发布时间】:2016-03-09 01:35:17
【问题描述】:

如何将每组列从低到高排序?

另外,我可以将工具提示中的数字设为 $ 货币格式并删除浮动吗?

非常感谢

JS

  $scope.chartConfig = {
    options: {
      chart: {
        type: 'column'
      },
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%b %e (%a)',
        },
    },

【问题讨论】:

  • 请提供一个最小的工作示例,而不仅仅是配置对象。
  • 1) 我不知道你真的可以这样排序(不容易) 2) 我不知道你应该:) 按值顺序对条形图进行排序通常很棒事物。以不同的顺序代表相同类别的条形图的多次迭代通常是一件坏事。如果你必须这样做,我会用三个不同的图而不是分组图表来做到这一点。

标签: highcharts highcharts-ng


【解决方案1】:

我使用了一些 if else 技巧来选择最小值和最大值:

  for (i = 0; i < y1.length; i++) {
   if (y1[i] < y2[i])                  
      if (y1[i] < y3[i])               
         if (y2[i] < y3[i])   { 

            pushfct(yObj1,y1[i],color1, name1);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y3[i], color3, name3);

            }
         else                          
             {  

            pushfct(yObj1,y1[i], color1, name1);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y2[i], color2, name2);

             }
      else                         
          { 

            pushfct(yObj1,y3[i], color3, name3);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y2[i], color2, name2);
            }
   else                            
      if (y2[i] < y3[i])               
         if (y1[i] < y3[i])            
             {            
            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y3[i], color3, name3);

             }
         else                      
             {            

            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y1[i], color1, name1);
             }
      else                         
          {

            pushfct(yObj1,y3[i],color3, name3);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y1[i], color1, name1);
          }

  }

要显示 $,只需使用工具提示下的格式化程序选项:

tooltip: {

    formatter:function(){
        return this.key +': $'+ this.y;
    }
},

请查看示例 (jsfiddle):

$(function() {
  var y1 = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
  var y2 = [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3];
  var y3 = [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 151.2];
  var color1="yellow", color2="green", color3="red";
  var name1="Montreal",name2="Paris",name3="Mostaganem";

    var yObj1=[],yObj2=[],yObj3=[];

function pushfct(tempObj,x,y,z){
 var temp={y:0,color:"xxxx", name:"xxxx"};
    temp.y=x;
    temp.color=y;
    temp.name=z;     
    tempObj.push(temp);
}
  for (i = 0; i < y1.length; i++) {
   if (y1[i] < y2[i])                  
      if (y1[i] < y3[i])               
         if (y2[i] < y3[i])   { 

            pushfct(yObj1,y1[i],color1, name1);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y3[i], color3, name3);

            }
         else                          
             {  

            pushfct(yObj1,y1[i], color1, name1);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y2[i], color2, name2);

             }
      else                         
          { 

            pushfct(yObj1,y3[i], color3, name3);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y2[i], color2, name2);
            }
   else                            
      if (y2[i] < y3[i])               
         if (y1[i] < y3[i])            
             {            
            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y3[i], color3, name3);

             }
         else                      
             {            

            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y1[i], color1, name1);
             }
      else                         
          {

            pushfct(yObj1,y3[i],color3, name3);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y1[i], color1, name1);
          }

  }

  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    tooltip: {

        formatter:function(){
            return this.key +': $'+ this.y;
        }
    },
    series: [{
        showInLegend:false,
      data: yObj1,
    }, {
        showInLegend:false,
      data: yObj2,
    }, {
        showInLegend:false,
      data: yObj3,
    }]
  });
});

【讨论】:

  • 我不认为这可以解决问题。它不是按顺序对组进行排序,而是将数据重新排列到不同的数组中。请注意此示例:'y1' (Montreal) 中的第一个值设置为 1,000。排序后,蒙特利尔不是最后一个点 - 数据已转移到“y3”(Mostaganem)。 | jsfiddle.net/jlbriggs/surjvod4/7
猜你喜欢
  • 1970-01-01
  • 2023-03-28
  • 2015-08-22
  • 2020-09-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
相关资源
最近更新 更多