Question

所以我需要使用javascript从头开始创建一个基本的条形图，我尝试设置一些东西，比如，我试图开始尝试定义一些值，但一切都出错了。

任务是创建一个程序，该程序将接受一些此类数据，由用户输入，并生成适当格式化的图形。输出可以看起来像这样：

以下是提供的数据

enter image description here

我怎样才能从头开始尝试？

Answer 1

考虑到图表的所有复杂性，我认为大多数人只使用众多开源图表库中的一个。 SparkLines只是一个例子。

然而，有时你只需要一个简单的图表而不添加库。条形图是最容易构建的条形图之一。下面的代码片段是非常基本的，但足以让OP从作业分配开始。

运行代码段以查看：

<html>
  <body>
    <style type="text/css">
        #chart {background-color: lightyellow; position: relative; height:200px; width: 200px; border: 1px black solid; display: table-cell; vertical-align: bottom; font-size: 10px; }
        .bar {position: absolute; bottom: 0; display:inline-block; width: 10px; margin: 2px; background-color: lightpink;}
    </style>
    
    <div id="chart"></div>
    
    <script type="text/javascript">
      
      
      var i, max, min, h, html='', data = [34.7,68.9,65.1,130.2,208.6,172.8,155.0,168.6,134.4,52.7,94.5,41.5];
      
      max = min = data[0];

      for(i=0; i<data.length; i++) {
        if (max < data[i]) max = data[i];
        if (min > data[i]) min = data[i];
      }

      
      for(i=0; i< data.length; i++) {
        h = Math.round( 100 * ((data[i] - min) / max));
        html += '<div class="bar" style="height:' + h + '%; left:' + (12 * i) + 'px">' + data[i] + '</div>';
      }
      
      document.getElementById('chart').innerHTML = html;
      
     </script>
    </body>
  </html>

Answer 2

将X轴上的值分组，以便在X轴上留下您想要的组数
计算每组的平均值
获取所有群组的最大价值;说它是320
获取您希望图表具有的像素高度;说200
使用规则3计算每个组的高度（以像素为单位）：
```
320       =  200
pixel-y   =  group-y
```
在图表上绘制相应的组

例如，如果某个组的Y值为120：

320       =  200
pixel-y   =  120

pixel-y = (320 * 120) / 200
pixel-y = 192

Javascript：从头开始创建图表？

2 个答案: