jq css 曲线图,jQuery.flot 响应式曲线图表

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var spline_chart_options = {

grid: {

hoverable: true,

borderWidth: {

top: 0,

right: 0,

bottom: 0,

left: 0

},

clickable: true,

margin: {

top: 10,

right: 10,

bottom: 0,

left: 10

},

mouseActiveRadius: 30

},

xaxis: {

tickLength: 0,

show: true,

color: '#fff',

ticks: [

[1, "Sat"],

[2, "Sun"],

[3, "Mon"],

[4, "Tue"],

[5, "Wed"],

[6, "Thu"],

[7, "Fri"]

]

},

yaxis: {

ticks: false,

tickLength: 0

},

tooltip: {

show: true,

cssClass: "flot-tt",

content: "%y",

defaultTheme: false

},

colors: ["#fff"]

};

// Chart 1

var chart_data = {

splines: {

show: true,

tension: 0.4,

lineWidth: 4,

fill: 0

},

points: {

show: true,

lineWidth: 1.5,

radius: 3,

symbol: "circle",

fill: true,

fillColor: "#ffffff"

},

data: [

[1, 4000],

[2, 3600],

[3, 6000],

[4, 3700],

[5, 4000],

[6, 3400],

[7, 5200]

]

};

// Chart 2

var spline_chart_data = {

splines: {

show: true,

tension: 0.4,

lineWidth: 4,

fill: 0

},

points: {

show: true,

lineWidth: 1.5,

radius: 3,

symbol: "circle",

fill: true,

fillColor: "#ffffff"

},

data: [

[1, 3500],

[2, 3600],

[3, 4000],

[4, 3800],

[5, 5000],

[6, 3800],

[7, 4200]

]

};

var SpLineChart = $.plot($("#spline-chart"), [chart_data], spline_chart_options);

var SpLineChart = $.plot($("#chart"), [spline_chart_data], spline_chart_options);