Question

问题：大家好！我正在使用chart.js绘制图表。图表是一个动态有时显示10点，有时可以超过数千我已经成功应用了一个面板，以便我的点可以在一定距离显示，以便轻松阅读。

现在我想知道是否有任何选项来设置x轴网格中点之间的距离。现在它会自动调整点数。

我尝试了什么： 我试图通过搜索其他stackoverflow答案来执行stepsize和scalewidth，但没有成功。任何形式的帮助将不胜感激。

P.S：我正在使用chart.js2

这是我的chartjs数据集

var data = {
    labels: data.graph_date,
    datasets: [
        {
            label: 'Assay Values',
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(255, 0, 0,1)",
            borderColor: "rgba(255, 0, 0,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderWidth: 1,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255, 0, 0,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
            pointHoverBorderColor: "rgba(255, 0, 0,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: data.assay_value,
            spanGaps: false
        },var options = {
    responsive: false,
    title: {
        display: true,
        position: "top",
        text: label,
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    },
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            label: function(tooltipItems, data) {
                var multistringText = ['Assay Value: '+tooltipItems.yLabel];
                multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
                multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
                return multistringText;
            }
        }
    },
    scales:{
        yAxes:[{
            ticks:{
                min:graph_min
            }
        }],
        xAxes: [{
            gridLines: {
                display:false
            }
        }]

    }
};
if(new_chart[ctx.canvas.id] != null)
    new_chart[ctx.canvas.id].destroy();

new_chart[ctx.canvas.id] =new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

在x轴上有这样的数据

[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]

y轴数据中的

就像这样

[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]

Answer 1

控制点之间距离的方法，它用X，Y轴设置最小值，最大值和步长，这样它们就不会改变，无论图表中的点数是多少。

这是一个设置比例的示例，以便它们永远不会改变。无论图表上出现多少点，一切都会保持不变。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Points',
      data: [
        {x: 0, y: 2},
        {x: 1, y: 3}, 
        {x: 2, y: 2},
        {x: 1.02, y: 0.4},
        {x: 0, y: -1}
      ],
      backgroundColor: 'rgba(123, 83, 252, 0.8)',
      borderColor: 'rgba(33, 232, 234, 1)',
      borderWidth: 1,
      fill: false,
      showLine: false,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js - Fixed X and Y Axis',
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: -1,
          max: 8,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }],
      yAxes: [{
        ticks: {
          min: -2,
          max: 4,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }]
    }
  }
});

这是一个codepen example，展示了它的外观

如何固定chartjs中水平点（x轴）之间的距离

1 个答案: