javascript chart.js散点图(含海关x & y日期和位置)[已关闭]

qoefvg9y  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(122)

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
4小时前关门了。
Improve this question
我想做一个聊天来显示工作的年龄和工作的位置chart like this我不知道这是否是posable与散点聊天。一切我所看到的和使用的海关标签使用他们只是作为一个计数器。我只是想知道是否有可能这样做或有更好的方式来显示这些信息。
我试过使用chart.js散点图，但是如果x和y都不是数字，我就无法让它工作。

JavaScript

1条答案

按热度按时间
6tr1vspr

6tr1vspr1#

这是可以改变你的X和Y在散点图。下面是我是如何做到这一点，但如果有人发现一个更好的方法，然后添加到我在这里所做的。

function DateFormatter(value) {
  var a = new Date(value * 1000);
  //var a = new Date(a - 3600000);/* daylight saving???*/
  //var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
  var year = a.getFullYear();
  var month = months[a.getMonth()];
  var date = a.getDate();

    if(month < 10){month = '0'+month;}
    if(date < 10){date = '0'+date;}

 if(year=='1970'){var time ='-'}
  else{var time =  year + '/' + month+ '/' + date;}
  return time;
}

$Job_Steps=[{"name":"Step 1","step_order":1}, {"name":"Step 2","step_order":2}, {"name":"Step 3","step_order":3}, {"name":"Step 4","step_order":4}, {"name":"Step 4","step_order":4}, {"name":"Step 5","step_order":5}, {"name":"Step 6","step_order":6}, {"name":"Step 7","step_order":7}, {"name":"Step 8","step_order":8}, {"name":"Step 9","step_order":9}, {"name":"Step 10","step_order":10}, {"name":"Step 11","step_order":11}, {"name":"Step 12","step_order":12}, {"name":"Step 13","step_order":13}, {"name":"Step 14","step_order":14}, {"name":"Step 15","step_order":15}, {"name":"Step 16","step_order":16}, {"name":"Step 16","step_order":16}, {"name":"Step 17","step_order":17}, {"name":"Step 18","step_order":18}, {"name":"Step 19","step_order":19}, {"name":"Step 20","step_order":20}];

  cdata = document.getElementById("myChart").getContext("2d");

  let data = {
      datasets: [{
          label: "Jobs",
          data: [
            {
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 11,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 16,
                  y: 1671112476,
                  label: "some info",
              },{
                  x: 4,
                  y: 1671187104,
                  label: "some info",
              },{
                  x: 2,
                  y: 1671194648,
                  label: "some info",
              },{
                  x: 2,
                  y: 1671198110,
                  label: "some info",
              },{
                  x: 8,
                  y: 1671204629,
                  label: "some info",
              },{
                  x: 10,
                  y: 1671205755,
                  label: "some info",
              },{
                  x: 9,
                  y: 1672754544,
                  label: "some info",
              },{
                  x: 8,
                  y: 1672755437,
                  label: "some info",
              },{
                  x: 7,
                  y: 1672768028,
                  label: "some info",
              },{
                  x: 16,
                  y: 1672833829,
                  label: "some info",
              },{
                  x: 2,
                  y: 1672865847,
                  label: "some info",
              },{
                  x: 2,
                  y: 1672915808,
                  label: "some info",
              },{
                  x: 2,
                  y: 1672915906,
                  label: "some info",
              },{
                  x: 2,
                  y: 1672915947,
                  label: "some info",
              },{
                  x: 2,
                  y: 1672916036,
                  label: "some info",
              },{
                  x: 19,
                  y: 1672921720,
                  label: "some info",
              },{
                  x: 16,
                  y: 1673279912,
                  label: "some info",
              },{
                  x: 2,
                  y: 1673348242,
                  label: "some info",
              },{
                  x: 16,
                  y: 1673432549,
                  label: "some info",
              },{
                  x: 19,
                  y: 1673598052,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673598295,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673598390,
                  label: "some info",
              },{
                  x: 16,
                  y: 1673598801,
                  label: "some info",
              },{
                  x: 9,
                  y: 1673599020,
                  label: "some info",
              },{
                  x: 2,
                  y: 1673599120,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673599661,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673599688,
                  label: "some info",
              },{
                  x: 11,
                  y: 1673602778,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673603861,
                  label: "some info",
              },{
                  x: 2,
                  y: 1673872468,
                  label: "some info",
              },{
                  x: 8,
                  y: 1673876388,
                  label: "some info",
              },{
                  x: 2,
                  y: 1673891495,
                  label: "some info",
              },{
                  x: 2,
                  y: 1673971127,
                  label: "some info",
              },{
                  x: 1,
                  y: 1673971232,
                  label: "some info",
              },{
                  x: 2,
                  y: 1674149641,
                  label: "some info",
              },{
                  x: 16,
                  y: 1674215071,
                  label: "some info",
              },{
                  x: 2,
                  y: 1674491051,
                  label: "some info",
              },{
                  x: 1,
                  y: 1674496100,
                  label: "some info",
              },{
                  x: 1,
                  y: 1674581264,
                  label: "some info",
              },{
                  x: 2,
                  y: 1674663159,
                  label: "some info",
              },{
                  x: 2,
                  y: 1674836752,
                  label: "some info",
              },{
                  x: 2,
                  y: 1675096141,
                  label: "some info",
              },{
                  x: 2,
                  y: 1675262167,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675416108,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675423369,
                  label: "some info",
              },{
                  x: 2,
                  y: 1675437811,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675677431,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675678596,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675680562,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675681657,
                  label: "some info",
              },{
                  x: 19,
                  y: 1675683447,
                  label: "some info",
              },{
                  x: 16,
                  y: 1675683820,
                  label: "some info",
              },{
                  x: 16,
                  y: 1675684253,
                  label: "some info",
              },{
                  x: 16,
                  y: 1675687668,
                  label: "some info",
              },{
                  x: 16,
                  y: 1675687963,
                  label: "some info",
              },{
                  x: 2,
                  y: 1675705048,
                  label: "some info",
              },{
                  x: 4,
                  y: 1676289480,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676369074,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676375913,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676396153,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676453414,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676477839,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676484919,
                  label: "some info",
              },{
                  x: 1,
                  y: 1676544267,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676645767,
                  label: "some info",
              },{
                  x: 2,
                  y: 1676892637,
                  label: "some info",
              },{
                  x: 2,
                  y: 1677080045,
                  label: "some info",
              },{
                  x: 2,
                  y: 1677089762,
                  label: "some info",
              },{
                  x: 2,
                  y: 1677091695,
                  label: "some info",
              },{
                  x: 2,
                  y: 1677173706,
                  label: "some info",
              },{
                  x: 4,
                  y: 1677177622,
                  label: "some info",
              },{
                  x: 2,
                  y: 1677244540,
                  label: "some info",
              },{
                  x: 1,
                  y: 1677491048,
                  label: "some info",
              },{
                  x: 1,
                  y: 1677491099,
                  label: "some info",
              },],
          backgroundColor: "rgb(33 152 138)"
      }]
  }
  
  let options = {
    responsive: true,
      plugins: {
          tooltip: {
              callbacks: {
                  label: function(cdata) {
                      let label = cdata.raw.label;
                      label += " (" + DateFormatter(cdata.raw.y) + ")";
                      return label;
                  }
              }
          }
      },
      scales: {
          x: {
              ticks: {
                  callback: function(value, index, values) {
                    for(var i = 0; i < $Job_Steps.length; i++){
                      if($Job_Steps[i].step_order == value){
                        var $x=$Job_Steps[i].name;
                      }
                    }
                    return $x;
                  }
              }
          },
          y: {
            reverse: true,
              ticks: {
                  callback: function(value, index, values) {
                    return DateFormatter(value);
                    //return value;
                  }
              }
          }
      }
  }
  
  scatterChart = new Chart(cdata, {
      type: "scatter",
      data: data,
      options: options,
  });
  $('.myChartLoader').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div>
  <canvas id="myChart"></canvas>
</div>

在刻度X中，我找到表中显示的值，并循环$Job_Steps数组以找到匹配的名称。（感觉这是最糟糕的一点，希望找到更好的方法）
在刻度Y中，我只是将时间戳传递到DateFormatter函数中，并将相反顺序设置为true，以便较早的刻度更接近顶部

赞(0）分享  回复(0）举报  2023-02-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com