javascript - Chart.js - Plot line graph with X , Y coordinates - Stack Overflow

admin管理员组

文章数量:1419239

I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .

I don't want to set labels , but have them generated automatically from the x,y coordinates. I think chartjs already implements that but my syntax is wrong.

var x = new Chart(document.getElementById("myChart1"), {
    type: 'line',
    data: {
        datasets: [{
            label: "Test",
            data: [{
                x: 0,
                y: 5
            }, {
                x: 5,
                y: 10
            }, {
                x: 8,
                y: 5
            }, {
                x: 15,
                y: 0
            }],
        }]
    },
    options: {
        responsive: true,
    }
});

Any idea how to fix the code above ?

I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .

I don't want to set labels , but have them generated automatically from the x,y coordinates. I think chartjs already implements that but my syntax is wrong.

var x = new Chart(document.getElementById("myChart1"), {
    type: 'line',
    data: {
        datasets: [{
            label: "Test",
            data: [{
                x: 0,
                y: 5
            }, {
                x: 5,
                y: 10
            }, {
                x: 8,
                y: 5
            }, {
                x: 15,
                y: 0
            }],
        }]
    },
    options: {
        responsive: true,
    }
});

Any idea how to fix the code above ?

• javascript
• chart.js

Share Improve this question Follow edited Jan 19, 2018 at 7:30 beaver 17.6k22 gold badges4343 silver badges6868 bronze badges asked Jul 14, 2017 at 8:25 Sam.tuverSam.tuver 70922 gold badges99 silver badges2020 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 31

I believe, what you are looking for, is a scatter graph, not line.

var x = new Chart(document.getElementById("myChart1"), {
   type: 'scatter',
   data: {
      datasets: [{
         label: "Test",
         data: [{
            x: 0,
            y: 5
         }, {
            x: 5,
            y: 10
         }, {
            x: 8,
            y: 5
         }, {
            x: 15,
            y: 0
         }],
      }]
   },
   options: {
      responsive: true
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Refer here, to learn more about scatter chart.

my fresh answer: the x values should be strings. transform your data this way:

data = data.map(
    v=>({y:v.y,x:''+v.x}));

i found it by chance. the labels array isn't needed.

to use the numeric values of x, and arrange the labels and points according to their numeric values, you can use the linear scale type for the x-axis as follows:

options: {
  scales: {
    x: {
      type: 'linear',
    },
  },
}

in this case, the mapping of the function above is not needed.

本文标签： javascriptChartjsPlot line graph with XY coordinatesStack Overflow