折线图的数值X轴

Question

我希望能够用一组（x，y）值绘制折线图。需要对x轴和y轴进行缩放。我的意思是说，比如我有这些值(1,10),(2,20),(4,30),(8,40)，1到2之间的距离应该是2到4之间距离的一半，而2到4之间距离又应该是4到8之间距离的一半。

现在当我尝试使用LineChart时，由于标签只是文本，它会显示相同间隔的1、2、4、8。

请查看example。

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]
    }]
};

有没有办法实现这个？

- Jishnu

Answer 1

如果您愿意，可以使用“scatter”图表类型（最近引入），或只需覆盖默认的X轴类型，将其改为“线性”而不是默认的“类别”设置（“时间”和“对数”是其他选项）。

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

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',
            // ...
        }]
    }
}

这个答案可能需要比显示的步骤更多（我没有模拟并且不知道您现有的选项），但这些是主要步骤。

- Shotgun Ninja

---

我之前有一个线性图，我可以确认唯一需要的更改是将数据点存储为{x:..., y:...}，并在选项中添加类型：'linear'。此外，无需维护data.labels，该字段可以完全删除。 - Luka Mesaric

Answer 2

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

此扩展支持数字比例尺。

- potatopeelings

---

谢谢 :) 这正是我在寻找的。 - Jishnu

Answer 3

如果你想在 JavaScript 中更新一个数组，可以使用以下代码：

var aChartDataMoy       = [];
for (i = 0; i < nbTamis; i++) {
            aChartDataMoy.push({
                'x': parseFloat(aTamis[i]),
                'y': parseFloat(aMoyenne[i])
            });   
}

和

datasets: [{
                    label: "Moyenne",
                    borderColor: 'rgb(229, 57, 53)',
                    borderWidth: 1,
                    fill: false,
                    data: aChartDataMoy
                }

- Fredo