Plotly.js
Plotly.js 是一个图表库，带有 40 多种图表类型、3D 图表、统计图和 SVG 地图。
散点图
源代码
var xArray = [50,60,70,80,90,100,110,120,130,140,150];var yArray = [7,8,8,9,9,9,10,11,14,14,15];// 定义数据var data = [{ x: xArray, y: yArray, mode:"markers", type:"scatter"}];// 定义布局var layout = { xaxis: {range: [40, 160], title: "平方米"}, yaxis: {range: [5, 16], title: "价格（百万元）"}, title: "房价 vs. 面积"};Plotly.newPlot("myPlot", data, layout);折线图
源代码
var xArray = [50,60,70,80,90,100,110,120,130,140,150];var yArray = [7,8,8,9,9,9,10,11,14,14,15];// 定义数据var data = [{ x: xArray, y: yArray, mode: "lines", type: "scatter"}];// 定义布局var layout = { xaxis: {range: [40, 160], title: "平方米"}, yaxis: {range: [5, 16], title: "价格（百万元）"}, title: "房价 vs. 面积"};// 使用 Plotly 来显示Plotly.newPlot("myPlot", data, layout);线性图
源代码
var exp = "x + 17";// 生成值var xValues = [];var yValues = [];for (var x = 0; x <= 10; x += 1) { yValues.push(eval(exp)); xValues.push(x);}// 定义数据var data = [{ x: xValues, y: yValues, mode: "lines"}];// 定义布局var layout = {title: "y = " + exp};// 使用 Plotly 来显示Plotly.newPlot("myPlot", data, layout);多行
源代码
var exp1 = "x";var exp2 = "1.5*x";var exp3 = "1.5*x + 7";// 生成值var x1Values = [];var x2Values = [];var x3Values = [];var y1Values = [];var y2Values = [];var y3Values = [];for (var x = 0; x <= 10; x += 1) { x1Values.push(x); x2Values.push(x); x3Values.push(x); y1Values.push(eval(exp1)); y2Values.push(eval(exp2)); y3Values.push(eval(exp3));}// 定义数据var data = [ {x: x1Values, y: y1Values, mode:"lines"}, {x: x2Values, y: y2Values, mode:"lines"}, {x: x3Values, y: y3Values, mode:"lines"}];// 定义布局var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};// 使用 Plotly 来显示Plotly.newPlot("myPlot", data, layout);条形图
源代码
var xArray = ["意大利","法国","西班牙","美国","阿根廷"];var yArray = [55, 49, 44, 24, 15];var data = [{ x: xArray, y: yArray, type: "bar" }];var layout = {title:"全球葡萄酒生产"};Plotly.newPlot("myPlot", data, layout);水平条形图
源代码
var xArray = [55, 49, 44, 24, 15];var yArray = ["意大利","法国","西班牙","美国","阿根廷"];var data = [{ x: xArray, y: yArray, type: "bar", orientation: "h"}];var layout = {title:"全球葡萄酒生产"};Plotly.newPlot("myPlot", data, layout);饼图
如需显示饼图而不是条形图，请将 x 和 y 更改为 labels 和 values ，并将 type 更改为 "pie"：
var data = [{ labels: xArray, values: yArray, type: "pie"}];甜甜圈图
如需显示甜甜圈而不是饼图，请添加一个 hole：
var data = [{ labels: xArray, values: yArray, hole: .4, type: "pie"}];绘制方程
源代码
var exp = "Math.sin(x)";// 生成值var xValues = [];var yValues = [];for (var x = 0; x <= 10; x += 0.1) { yValues.push(eval(exp)); xValues.push(x);}// 使用 Plotly 来显示var data = [{x:xValues, y:yValues, mode:"lines"}];var layout = {title: "y = " + exp};Plotly.newPlot("myPlot", data, layout);