Question

我一直在尝试使用Chart.JS创建一个简单的折线图来绘制我的数据。

就我而言，数据的格式如下：

[[1452,100],[1330,100],[1307,100],[1105,100],[1071,200],[1261,100]]

每个片段中的第一个条目是x坐标，第二个条目是y坐标。

在chart.js文档中显示的示例中，x坐标只是文本标签：

var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

绘制x和y数据的最佳方法是什么，而不是简单地生成淫秽数量的标签（在这种情况下，数据是6个条目，实际上是数千个）。

编辑：

为清楚起见，我并不是指散点图 - 数据是结构化的，并且根据数据的来源，将形成一条线。 x轴将按顺序排列，没有重复的条目。

数据看起来大致如下：

Answer 1

听起来你想制作散点图。 Chart.js示例都没有显示如何制作散点图，因为它没有这种能力。如果必须使用Chart.js，则可以使用散点图插件，例如https://dima117.github.io/Chart.Scatter/处提供的插件。

如果您不介意更改绘图库，您可能需要考虑类似Highcharts或Dojo Charting的内容。有很多选择，但我发现这两个选项很容易使用。

如何使用x和y数据绘制折线图

1 个答案: