图表JS对数x轴

问题描述 投票：1回答：1

我想创建一个具有x轴对数的图形。我举了一个例子，将类型更改为对数。但是我在y轴本身上获得了所有y值（请参阅附件），但是当我使y轴为对数时，它可以正常工作。我正在使用Chartjs 2.9.3版本。当我使用2.8.0时，没有输出。

这是我的代码：

<!doctype html>
<html>

<head>
    <title>Logarithmic Line Chart</title>
    <script src="/PHP/test/Chart.min.js"></script>
    <script src="/PHP/test/utils.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
    var randomScalingFactor = function() {
        return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
    };

    var config = {
        type: 'line',

        data: {
            labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                fill: false,
                data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
            },]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Chart.js Line Chart - Logarithmic'
            },
            scales: {
                xAxes: [{
                    stacked:false,
                    display: true,
                    type:'logarithmic',
                }],
                yAxes: [{
                    stacked:false,
                    display: true,

                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas');
        window.myLine = new Chart(ctx, config);
    };

    document.getElementById('randomizeData').addEventListener('click', function() {
        config.data.datasets.forEach(function(dataset) {
            dataset.data = dataset.data.map(function() {
                return randomScalingFactor();
            });

        });

        window.myLine.update();
    });
</script>
</body>

current incorrect output

chart.js
1个回答
0
投票

如果两个轴都是数字，则数据需要以points的数组形式提供，即：

[ { x: 111, y: 222 }, ... ]

摘自文档：

此替代选项用于稀疏数据集，例如scatter charts中的数据集。使用包含x和y属性的对象指定每个数据点。

这是发布代码中的一个有效示例：

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'red',
      borderColor: 'red',
      fill: false,
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 4 },
        { x: 5, y: 5 },
        { x: 6, y: 6 },
        { x: 7, y: 7 },
        { x: 8, y: 8 },
        { x: 9, y: 9 },
        { x: 10, y: 10 },
        { x: 11, y: 11 },
        { x: 12, y: 12 },
        { x: 13, y: 13 },
        { x: 14, y: 14 },
        { x: 15, y: 15 }
      ]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart - Logarithmic'
    },
    scales: {
      xAxes: [{
        type: 'logarithmic'
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('canvas');
  window.myLine = new Chart(ctx, config);
};
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="canvas"></canvas>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.