javascript - 如何让 chart.js 基于 x,y 数据集自动构建 x 轴标签？

Question

有没有办法让 chart.js 自动显示最适合的标签范围和 X、Y 数据集？

我有一个简单的数据集，它基于零但数据间隔不等，ala:

 0.0, 7.0
 0.5, 8.0
 1.2, 9.0
 ...
 49.9 213.0

有没有办法将此数据集传递到 chart.js 并让它做正确的事情并计算，比如说，从 0 -> 50.0 的 10 个标签并显示由一条线连接的所有数据点？

Answer 1

编辑:接受版本以下不再适用于版本 ^2.7。

• 对于最新版本 2.9 散点系列不再显示线条。所以你需要使用带有线性刻度的线系列。所以你的选择如下:

 var randomColor = function(opacity) {
   return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
 };

 var scatterChartData = {
   datasets: [{
     label: "My First dataset",
     fill: false,
     lineTension: 0,
     borderWidth: 3,
     data: [{
        x: 0.328,
        y: 0.2
      },{
        x: 0.328,
        y: 1.0
      },
      {
        x: -0.328,
        y: 1.0
      },
      {
        x: -0.328,
        y: 0.2
      },
      {
        x: 0.0,
        y: 0.0
      },
      ]
   }]
 };

 $.each(scatterChartData.datasets, function(i, dataset) {
   dataset.borderColor = randomColor(0.4);
   dataset.backgroundColor = randomColor(0.1);
   dataset.pointBorderColor = randomColor(0.7);
   dataset.pointBackgroundColor = randomColor(0.5);
   dataset.pointBorderWidth = 1;
 });

 window.onload = function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myScatter = Chart.Line(ctx, {
     data: scatterChartData,
     options: {
       title: {
         display: true,
         text: 'Chart.js Scatter Chart'
       },
       scales: {
         xAxes: [{
           type: 'linear',
           position: 'top',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'x axis'
           }
         }],
         yAxes: [{
           type: 'linear',
           position: 'right',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'y axis'
           }
         }]
       }
     }
   });
 };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<div style="width:75%">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

• 从 2.1.3 到 2.7，您需要在原始答案的选项对象中使用 showLines: true。

原答案:

这可以通过 chart.js 2.x 开箱即用，使用随数据传递 x 和 y 属性的能力。

这是取自 chart.js 示例的示例

var randomScalingFactor = function() {
   return Math.round(Math.random() * 10);
 };
 var randomColor = function(opacity) {
   return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
 };

 var scatterChartData = {
   datasets: [{
     label: "My First dataset",
     data: [{
       x: 0.4,
       y: randomScalingFactor(),
     }, {
       x: 1.6,
       y: randomScalingFactor(),
     }, {
       x: 4.7,
       y: randomScalingFactor(),
     }, {
       x: 9.2,
       y: randomScalingFactor(),
     }, {
       x: 20.1,
       y: randomScalingFactor(),
     }, {
       x: 44.5,
       y: randomScalingFactor(),
     }, {
       x: 155.3,
       y: randomScalingFactor(),
     }]
   }]
 };

 $.each(scatterChartData.datasets, function(i, dataset) {
   dataset.borderColor = randomColor(0.4);
   dataset.backgroundColor = randomColor(0.1);
   dataset.pointBorderColor = randomColor(0.7);
   dataset.pointBackgroundColor = randomColor(0.5);
   dataset.pointBorderWidth = 1;
 });

 window.onload = function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myScatter = Chart.Scatter(ctx, {
     data: scatterChartData,
     options: {
       title: {
         display: true,
         text: 'Chart.js Scatter Chart'
       },
       scales: {
         xAxes: [{
           position: 'bottom',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'x axis'
           }
         }],
         yAxes: [{
           position: 'left',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'y axis'
           }
         }]
       }
     }
   });
 };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<div style="width:75%">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>