Hướng dẫn php graph from csv - đồ thị php từ csv

Question

Hướng dẫn php graph from csv - đồ thị php từ csv

Nội dung chính Show

Hoàn thiện
Tiểu sử
Bắt đầu
Tạo một biểu đồ đơn giản
Tải tệp CSV
Thêm dữ liệu CSV vào biểu đồ
Thêm tên người chơi vào biểu đồ
Thêm tuần vào biểu đồ
Tải dữ liệu của riêng bạn
Bản tóm tắt
Làm cách nào để hiển thị dữ liệu từ CSV trong HTML?
Bạn có thể vẽ đồ thị trong tệp CSV không?
Làm cách nào để chuyển đổi CSV thành đồ thị?
Làm cách nào để nhúng tệp CSV trong HTML?

Mã PHP

Tùy chỉnh liên quan

Chiều rộng của các điểm dữ liệu có thể được sửa đổi bằng thuộc tính datapointwidth. Một số tùy chọn tùy chỉnh thường được sử dụng khác bao gồm Exportenables, AnimationEnables, chủ đề, v.v.

Tôi cần hiển thị một biểu đồ (Piegraph và Xygraph) trong tệp HTML. Tôi đã sử dụng một số công cụ miễn phí đã tạo ra một hình ảnh và tôi đang cố gắng hiển thị điều này trên HTML.

Nội phân chính

Bắt đầu
Tạo một biểu đồ đơn giản
Tải tệp CSV
Thêm dữ liệu CSV vào biểu đồ
Thêm tên người chơi vào biểu đồ
Thêm tuần vào biểu đồ
Tải dữ liệu của riêng bạn
Làm cách nào để hiển thị dữ liệu từ CSV trong HTML?
Bạn có thể vẽ đồ thị trong tệp CSV không?
Làm cách nào để chuyển đổi CSV thành đồ thị?
Làm cách nào để nhúng tệp CSV trong HTML?

Giải pháp: Bạn phải sử dụng tệp jQuery để hiển thị các tệp CSV vào HTML ..

Nhập Gandas dưới dạng PD ..

Thanks,

df = pd. read_csv ('tệp. csv').Aug 1, 2012 at 6:35

1

html = df. TO_HTML ('Converted_File. Html').

Tôi cần hiển thị một biểu đồ (Piegraph và Xygraph) trong tệp HTML. Tôi đã sử dụng một số công cụ miễn phí đã tạo ra một hình ảnh và tôi đang cố gắng hiển thị điều này trên HTML.Aug 1, 2012 at 7:39

Rainer.RRainer.RRainer.R

Nội phân chính2 silver badges8 bronze badges

Bắt đầu

Tạo một biểu đồ đơn giản

Tải tệp CSV

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

Hoàn thiện

Để tóm tắt, để tạo một biểu đồ từ CSV, chúng ta chỉ cần phân tích dữ liệu đến định dạng được hỗ trợ của CanVASJS và sau đó chuyển các dữ liệu đến biểu đồ.

Dưới đây là tổng hợp của mã cuối cùng.

Hãy tự mình thử bằng cách chỉnh sửa mã bên dưới.

Yêu cầu kiến thức trung gian về JavaScript

21 tháng 1 năm 2019

Trong hướng dẫn này, tôi chỉ cho bạn cách tải tệp giá trị phân tách dấu phẩy (CSV) và trực quan hóa nó bằng biểu đồ.js.

Nhấp vào hình ảnh để xem biểu đồ tương tác

Tiểu sử

Tệp CSV là một tệp văn bản đại diện cho một bảng dữ liệu. Hãy nghĩ về nó như là một đại diện dựa trên văn bản của một bảng tính. Mỗi dòng đại diện cho một hàng trong bảng tính và mỗi giá trị được phân tách bằng dấu phẩy:

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

Dữ liệu CSV mà chúng tôi sẽ sử dụng là danh sách các tay vợt chứa số tuần họ đã dành ở đầu bảng xếp hạng ATP (dành cho nam) và WTP (dành cho phụ nữ). Bộ dữ liệu ban đầu là từ Tableau.

Bạn sẽ sử dụng D3 để tải tệp CSV và biểu đồ.js để tạo biểu đồ.

Bắt đầu

Bạn sẽ sử dụng Codepen để tạo biểu đồ vì nó dễ sử dụng và yêu cầu thiết lập tối thiểu. Nếu bạn thích phát triển cục bộ, bạn có thể xuất các tệp dự án từ bút. (Bạn cũng sẽ cần thiết lập máy chủ web địa phương.)

Trong Codepen, hãy tạo một cây bút mới, sau đó nhấp vào COG trong bảng JS.

Thêm biểu đồ.js và D3 bằng cách thêm các URL sau vào ‘Thêm các tập lệnh bên ngoài/danh sách Bút:

https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js

Tạo một biểu đồ đơn giản

Bạn sẽ bắt đầu bằng cách tạo một biểu đồ thanh đơn giản bằng biểu đồ.js.

Thêm phần tử

5 vào HTML:

 id="chart">

Điều này sẽ hoạt động như một container cho biểu đồ.

Bây giờ thêm JavaScript sau (vào bảng điều khiển JS của Codepen):

var chart = new Chart('chart', {
  type: 'horizontalBar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [
      {
        data: [10, 20, 30]
      }
    ]
  }
});

Điều này sử dụng biểu đồ.js để tạo biểu đồ thanh ngang.

Trong bảng đầu ra của Codepen, bạn sẽ thấy một cái gì đó như:

Tải tệp CSV

Bạn sẽ sử dụng chức năng D3 D3

6 để yêu cầu tệp CSV. .

Thêm phần sau vào đầu JavaScript:

d3.csv('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2814973/atp_wta.csv')
  .then(makeChart);

function makeChart(players) {
  // players is an array of objects where each object represents a player
}

Điều này làm hai điều:

yêu cầu tệp CSV
Khi CSV đến, chuyển đổi nó thành một mảng và gọi hàm
```
5,9
6,9
7,14
8,12
9,14
10,18
11,13
12,8
13,11
14,13
```
7

Mảng sẽ bao gồm các đối tượng, trong đó mỗi đối tượng đại diện cho một hàng trong CSV:

[
  {
    "Name": "Steffi Graf",
    "Weeks": "377",
    "Gender": "Female"
  },
  {
    "Name": "Martina Navratilova",
    "Weeks": "332",
    "Gender": "Female"
  },
  {
    "Name": "Serena Williams",
    "Weeks": "319",
    "Gender": "Female"
  },
  {
    "Name": "Roger Federer",
    "Weeks": "308",
    "Gender": "Male"
  },
  ...
]

Hàm

7 được gọi sau khi mảng đã được tạo và mảng được truyền dưới dạng tham số đầu tiên.

Thêm dữ liệu CSV vào biểu đồ

Di chuyển mã biểu đồ vào

7. JavaScript của bạn bây giờ là:

d3.csv('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2814973/atp_wta.csv')
  .then(makeChart);

function makeChart(players) {
  var chart = new Chart('chart', {
    type: 'horizontalBar',
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [
        {
          data: [10, 20, 30]
        }
      ]
    }
  });
}

Lưu ý rằng tham số đầu tiên ____ 20 20 được đặt tên là

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

1. Đây là mảng của người chơi.

Thêm tên người chơi vào biểu đồ

Các nhãn trục y được đặt bằng mảng

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

2 (hiện là

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

3).

Chúng tôi thích điều này để trở thành một mảng tên người chơi. Chúng ta có thể tạo điều này bằng cách sử dụng chức năng JavaScript từ

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

4.

Thêm phần sau vào đầu

7:

var playerLabels = players.map(function(d) {return d.Name});

Hàm

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

6 đi qua từng mục của

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

1 và chọn thuộc tính

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

8. Do đó

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

9 là một mảng như:

0

Cập nhật giá trị

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

2 lên

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

9:

1

Bây giờ bạn sẽ thấy tên người chơi dọc theo trục y:

Thêm tuần vào biểu đồ

Độ dài của các thanh được xác định bởi mảng

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

2 (hiện là

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

3).

Theo cách tương tự như các nhãn mà bạn sẽ tạo ra một mảng ‘tuần ở vị trí số một bằng cách sử dụng

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

4:

2

Bây giờ cập nhật giá trị ____ 32 lên

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

6:

3

7 bây giờ sẽ trông giống như:

4

Bây giờ bạn sẽ thấy một biểu đồ thanh của dữ liệu CSV:

Tải dữ liệu của riêng bạn

Bạn có thể muốn tải dữ liệu của riêng mình vào biểu đồ biểu đồ.js. Nếu bạn biết theo cách của bạn xung quanh một máy chủ web địa phương, bạn có thể lưu trữ tệp cục bộ và cập nhật URL trong cuộc gọi

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

8.

Nếu không, bạn có thể lưu trữ CSV của mình trên Codepen và sử dụng URL của nó trong cuộc gọi

Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
etc.

8.

Bản tóm tắt

Chúng tôi đã tải một tệp CSV vào trình duyệt bằng chức năng D3 D3

6. Điều này chuyển đổi CSV thành một mảng các đối tượng trong đó mỗi đối tượng đại diện cho một người chơi.

Sau đó, chúng tôi đã sử dụng chức năng JavaScript từ

var dataPoints = [];

function getDataPointsFromCSV(csv) {
    var dataPoints = csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
        
    for (var i = 0; i < csvLines.length; i++)
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(",");
            dataPoints.push({ 
                x: parseFloat(points[0]), 
                y: parseFloat(points[1]) 		
	    });
	}
    return dataPoints;
}
	 
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
	    text: "Chart from CSV",
        },
        data: [{
	    type: "line",
	    dataPoints: getDataPointsFromCSV(data)
	}]
    });
		
    chart.render();

});

4 để chuyển đổi mảng các đối tượng thành một mảng tên người chơi và một loạt các tuần. Chúng tôi đã tạo một biểu đồ thanh bằng biểu đồ.js và sử dụng hai mảng này để đặt nhãn người chơi và độ dài thanh.

Mật mã

Xem bút trực quan hóa tệp CSV với biểu đồ.js (cơ bản) của Peter Cook (@CreatewithData) trên CodePen.

Ở đây, một phiên bản khác với kiểu dáng bổ sung:

Xem bút trực quan hóa tệp CSV với biểu đồ.js của Peter Cook (@CreatewithData) trên CodePen.

Làm cách nào để hiển thị dữ liệu từ CSV trong HTML?

Để hiển thị dữ liệu từ tệp CSV đến trình duyệt web, chúng tôi sẽ sử dụng hàm fgetcsv () ...

Giá trị phân tách dấu phẩy (CSV) là một tệp văn bản chứa nội dung dữ liệu.....

hàm fgetcsv (): hàm fgetcsv () được sử dụng để phân tích một dòng từ một tệp mở, kiểm tra các trường CSV ..

Các bước thực thi:.

Tên tệp: Code.php ..

Output:.

Bạn có thể vẽ đồ thị trong tệp CSV không?

Nhập ngày từ tệp CSV vào excel.go vào ruy băng và nhấp vào chèn. Chọn loại đồ thị mà bạn muốn chèn. Chọn một biểu đồ, một cửa sổ trống sẽ xuất hiện. Go to the ribbon and click Insert. Choose the type of graph that you want to insert. On selecting a graph, a blank window will appear.

Làm cách nào để chuyển đổi CSV thành đồ thị?

Làm thế nào để đồ thị một tệp CSV trong Excel..

Mở tệp CSV của bạn trong MS Excel.Video trong ngày ..

Chọn các ô dữ liệu bạn muốn vẽ bằng cách nhấp vào ô góc và kéo con trỏ đến góc xa.Phát hành nút chuột ..

Tạo biểu đồ bằng cách nhấp vào nút "Loại biểu đồ" trên thanh công cụ biểu đồ ..

Làm cách nào để nhúng tệp CSV trong HTML?

Giải pháp: Bạn phải sử dụng tệp jQuery để hiển thị các tệp CSV vào HTML ...

Nhập Gandas dưới dạng PD ..

df = pd.read_csv ('tệp. csv').

html = df.TO_HTML ('Converted_File. Html').

programming php PHP bar Chart

Hướng dẫn php graph from csv - đồ thị php từ csv

Tùy chỉnh liên quan

Hoàn thiện

Tiểu sử

Bắt đầu

Tạo một biểu đồ đơn giản

Tải tệp CSV

Thêm dữ liệu CSV vào biểu đồ

Thêm tên người chơi vào biểu đồ

Thêm tuần vào biểu đồ

Tải dữ liệu của riêng bạn

Bản tóm tắt

Mật mã

Làm cách nào để hiển thị dữ liệu từ CSV trong HTML?

Bạn có thể vẽ đồ thị trong tệp CSV không?

Làm cách nào để chuyển đổi CSV thành đồ thị?

Làm cách nào để nhúng tệp CSV trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội