javascript - 使用 chartist.js 在图表中的 Y 轴上分组数千个数字

标签 javascript php graph charts chartist.js

我使用 JavaScript (PHP) 中的 Chartist.js 库创建了图表以图形形式显示值。 Y 轴的所有值均来自数据库。但我无法以千位分组格式显示 Y 轴。我想在交叉点的工具提示上显示千格式值(检查图像)

PHP代码

$clientData = $wpdb->get_results('SELECT * FROM clientsdata WHERE Client_Id = "'.$currentUser->ID.'"');
$months=array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$selectedFieldData = array();
foreach($months as $month){ 
$value = '';
    foreach($clientData as $client){
        if($client->Month == $month && $client->Year == $selectYear){
            $value = $client->$fieldValue;
            break;
        }
    }
    if(!empty($value)){ 
            $selectedFieldData[] = $value; //See below - 1
        }
        else{
            $selectedFieldData[] = null;
        }
}

JavaScript代码(图实际代码)

$data =  "<script type='text/javascript'>


  var chart = new Chartist.Line('#chart1',{
  labels: ['January', 'February', 'March','April' ,'May' ,'June' ,'July' ,'August' ,'September' ,'October' ,'November' ,'December'],
  series: [
    [$selectedFieldData[0],$selectedFieldData[1],$selectedFieldData[2],$selectedFieldData[3],$selectedFieldData[4],$selectedFieldData[5],
    $selectedFieldData[6],$selectedFieldData[7],$selectedFieldData[8],$selectedFieldData[9],$selectedFieldData[10],$selectedFieldData[11]],
  ]
},
{
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip({
      pointClass: 'my-cool-point'
    })
  ]

  //low: 0
},
{ 
axisY: {
    labelInterpolationFnc: function(value){
        return value;
}}
}

);



// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
  delays = 80,
  durations = 500;

// Once the chart is fully created we reset the sequence
chart.on('created', function() {
  seq = 0;
});

// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
  seq++;

  if(data.type === 'line') {
    // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
    data.element.animate({
      opacity: {
        // The delay when we like to start the animation
        begin: seq * delays + 1000,
        // Duration of the animation
        dur: durations,
        // The value where the animation should start
        from: 0,
        // The value where it should end
        to: 1
      }
    });
  } else if(data.type === 'label' && data.axis === 'x') {
    data.element.animate({
      y: {
        begin: seq * delays,
        dur: durations,
        from: data.y + 100,
        to: data.y,
        // We can specify an easing function from Chartist.Svg.Easing
        easing: 'easeOutQuart'
      }
    });
  } else if(data.type === 'label' && data.axis === 'y') {
    data.element.animate({
      x: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 100,
        to: data.x,
        easing: 'easeOutQuart'
      }
    });
  } else if(data.type === 'point') {
    data.element.animate({
      x1: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 10,
        to: data.x,
        easing: 'easeOutQuart'
      },
      x2: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 10,
        to: data.x,
        easing: 'easeOutQuart'
      },
      opacity: {
        begin: seq * delays,
        dur: durations,
        from: 0,
        to: 1,
        easing: 'easeOutQuart'
      }
    }
    );
    var circle = new Chartist.Svg('circle', {
        cx: [data.x],
      cy: [data.y],
      r: [5], 
      'ct:value': data.value.y,
      'ct:meta': data.meta,
      class: 'my-cool-point',
    }, 'ct-area');

    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
    data.element.replace(circle);


  } else if(data.type === 'grid') {
    // Using data.axis we get x or y which we can use to construct our animation definition objects
    var pos1Animation = {
      begin: seq * delays,
      dur: durations,
      from: data[data.axis.units.pos + '1'] - 30,
      to: data[data.axis.units.pos + '1'],
      easing: 'easeOutQuart'
    };

    var pos2Animation = {
      begin: seq * delays,
      dur: durations,
      from: data[data.axis.units.pos + '2'] - 100,
      to: data[data.axis.units.pos + '2'],
      easing: 'easeOutQuart'
    };

    var animations = {};
    animations[data.axis.units.pos + '1'] = pos1Animation;
    animations[data.axis.units.pos + '2'] = pos2Animation;
    animations['opacity'] = {
      begin: seq * delays,
      dur: durations,
      from: 0,
      to: 1,
      easing: 'easeOutQuart'
    };




    data.element.animate(animations);
  }
});

// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
chart.on('created', function() {
  if(window.__exampleAnimateTimeout) {
    clearTimeout(window.__exampleAnimateTimeout);
    window.__exampleAnimateTimeout = null;
  }
  window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 1200000);
});

  </script>";

  echo $data;

1 - 如果我在这里使用 number_format，那么它会将值转换为千格式，但是数组在单独的位置获取值，因此实际值会中断。

enter image description here

谁能尝试解决这个问题？

最佳答案

最后，我的一位 friend 解决了这个问题。

  1. 由 Jquery 修复 - 图中 Y 轴上以千为单位的数字。 工具提示上按“货币 :' '”固定的千位数字。

这是完整的代码。 PHP代码

$clientData = $wpdb->get_results('SELECT * FROM clientsdata WHERE Client_Id = "'.$currentUser->ID.'"');
$months=array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$selectedFieldData = array();
foreach($months as $month){ 
$value = '';
    foreach($clientData as $client){
        if($client->Month == $month && $client->Year == $selectYear){
            $value = $client->$fieldValue;
            break;
        }
    }
    if(!empty($value)){ 
            $selectedFieldData[] = $value;
        }
        else{
            $selectedFieldData[] = null;
        }
}

JavaScript 代码

$data =  "<script type='text/javascript'>


  var chart = new Chartist.Line('#chart1',{
  labels: ['January', 'February', 'March','April' ,'May' ,'June' ,'July' ,'August' ,'September' ,'October' ,'November' ,'December'],
  series: [
    [$selectedFieldData[0],$selectedFieldData[1],$selectedFieldData[2],$selectedFieldData[3],$selectedFieldData[4],$selectedFieldData[5],
    $selectedFieldData[6],$selectedFieldData[7],$selectedFieldData[8],$selectedFieldData[9],$selectedFieldData[10],$selectedFieldData[11]],
  ]
},
{
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip({
      pointClass: 'my-cool-point',
      currency :' ' //Used for display grouped thousand format value on toolip
    })
  ]

  //low: 0
},
{ 
axisY: {
    labelInterpolationFnc: function(value){
        return value;
}}
}

);



// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
  delays = 80,
  durations = 500;

// Once the chart is fully created we reset the sequence
chart.on('created', function() {
  seq = 0;
});

// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
  seq++;

  if(data.type === 'line') {
    // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
    data.element.animate({
      opacity: {
        // The delay when we like to start the animation
        begin: seq * delays + 1000,
        // Duration of the animation
        dur: durations,
        // The value where the animation should start
        from: 0,
        // The value where it should end
        to: 1
      }
    });
  } else if(data.type === 'label' && data.axis === 'x') {
    data.element.animate({
      y: {
        begin: seq * delays,
        dur: durations,
        from: data.y + 100,
        to: data.y,
        // We can specify an easing function from Chartist.Svg.Easing
        easing: 'easeOutQuart'
      }
    });
  } else if(data.type === 'label' && data.axis === 'y') {
    data.element.animate({
      x: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 100,
        to: data.x,
        easing: 'easeOutQuart'
      }
    });
  } else if(data.type === 'point') {
    data.element.animate({
      x1: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 10,
        to: data.x,
        easing: 'easeOutQuart'
      },
      x2: {
        begin: seq * delays,
        dur: durations,
        from: data.x - 10,
        to: data.x,
        easing: 'easeOutQuart'
      },
      opacity: {
        begin: seq * delays,
        dur: durations,
        from: 0,
        to: 1,
        easing: 'easeOutQuart'
      }
    }
    );
    var circle = new Chartist.Svg('circle', {
        cx: [data.x],
      cy: [data.y],
      r: [5], 
      'ct:value': data.value.y,
      'ct:meta': data.meta,
      class: 'my-cool-point',
    }, 'ct-area');

    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
    data.element.replace(circle);


  } else if(data.type === 'grid') {
    // Using data.axis we get x or y which we can use to construct our animation definition objects
    var pos1Animation = {
      begin: seq * delays,
      dur: durations,
      from: data[data.axis.units.pos + '1'] - 30,
      to: data[data.axis.units.pos + '1'],
      easing: 'easeOutQuart'
    };

    var pos2Animation = {
      begin: seq * delays,
      dur: durations,
      from: data[data.axis.units.pos + '2'] - 100,
      to: data[data.axis.units.pos + '2'],
      easing: 'easeOutQuart'
    };

    var animations = {};
    animations[data.axis.units.pos + '1'] = pos1Animation;
    animations[data.axis.units.pos + '2'] = pos2Animation;
    animations['opacity'] = {
      begin: seq * delays,
      dur: durations,
      from: 0,
      to: 1,
      easing: 'easeOutQuart'
    };




    data.element.animate(animations);
  }
});

// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
chart.on('created', function() {
  if(window.__exampleAnimateTimeout) {
    clearTimeout(window.__exampleAnimateTimeout);
    window.__exampleAnimateTimeout = null;
  }
  window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 1200000);
});


//Below code is for display grouped thousand format value on Y-AXIS   
      </script><script>
      function commaSeparateNumberr(val){
        while (/(\d+)(\d{3})/.test(val.toString())){
          val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
        }
        return val;
      }
     setTimeout(function(){ jQuery('.ct-vertical').each(function(){  
        var ab =jQuery(this).html();
        jQuery(this).html(commaSeparateNumberr(ab));
        }); }, 2000);
      </script>";

      echo $data;

关于javascript - 使用 chartist.js 在图表中的 Y 轴上分组数千个数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38867438/

上一篇：php - WordPress Apache VirtualAlloc 和 VirtualFree 失败，PHP 内存不足

下一篇：php - 通过 Php AltoRouter 路由

相关文章：

php - 我的代码可以避免 SQL 注入(inject)吗

php - 加快 PHP Imagick 库 PDF -> PNG 转换(20 秒!)

php - 打卡/打卡 使用 mysql 或 php 数组函数将多个用户的进入时间合并起来

javascript - 我可以修改 Jquery 以根据返回的 URL 使用条件语句吗？

javascript - ui.position 相对位置的错误值

javascript - Chrome 扩展选项页面不保存值

javascript - 如何重置 webrtc 状态？

c - 将图分成三部分，使三部分权重之和的最大值最小化

javascript - 负载图上的 Highstock 仅显示一个点

查找由二部图的连通分量引起的顶点子集的算法

©2024 IT工具网  联系我们