折线图的数字X轴

Question

我想用一组（x，y）值绘制折线图。x轴和y轴都需要缩放。我的意思是说，我的值是（1,10），（2,20），（4,30），（8,40）1和2之间的距离应该是2和4之间的一半。 4和8的一半。

现在，当我尝试使用折线图时，由于标签只是文本，因此显示1,2,4,8，并且它们之间有相同的间距。

请检查示例

var ctx = document.getElementById("chart").getContext("2d");
var data = {
    labels: [1, 2, 4, 8],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data: [10,20,30,40]
    }]
};

有什么办法可以做到这一点？

Answer 1

如果需要，您可以使用'scatter'图表类型（这是最近引入的），或者只是覆盖默认的 X 轴类型来'linear'代替默认'category'设置（'time'和'logarithmic'其他选项）。

但是，如果采用这种方法，则需要更改数据格式：

var data = {
    // No more "labels" field!
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data: [{x:1,y:10},{x:2,y:20},{x:4,y:30},{x:8,y:40}] // Note the structure change here!
    }]
}

您还需要确保（如果您继续'line'用作图表类型）覆盖选项：

var options = {
    scales: {
        xAxes: [{
            type: 'linear',
            // ...
        }]
    }
}

可能需要的步骤比本答案中显示的更多（我没有对此进行模拟，我不知道您现有的选项），但这些是主要步骤。

Answer 2

查看散点图扩展 ( http://dima117.github.io/Chart.Scatter/ ) - 在http://www.chartjs.org/docs/#advanced-usage-community-extensions的社区扩展下列出。

这支持数字比例。