使用带主干的HighCharts
Using HighCharts with Backbone
本文关键字:HighCharts 更新时间:2024-03-08
我已经为我的新网站部署了一个使用Backbone JS的Bootstrap UI的网站。我想在页面上加载一个示例/演示图表。我没有找到关于相同的教程。有人能帮我吗?
这是我试图在我的网站上加载的示例代码:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
您可以使用视图的"render"方法初始化高图:
$(function () {
var DataModel = Backbone.Model.extend({});
var DataCollection = Backbone.Collection.extend({
model: DataModel
});
var DataView = Backbone.View.extend({
el: '#container',
initialize: function (options) {
this.data = options.data;
},
render: function () {
this.$el.highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: this.data.toJSON()
});
}
});
var items = new DataCollection([{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]);
var view = new DataView({ data: items });
view.render();
});
下面是一个示例:jsfiddle
相关文章:
- 在Web应用程序中使用Highcharts javascript
- 在Highcharts中,我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- HighCharts长标题文本在某些元素上重叠
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Highcharts仪表未显示
- Highcharts-图表外的图例定位
- Highcharts动态烛台
- 在highcharts.js中向点弹出窗口动态添加文本
- Highcharts 3d调整zindex错误
- 如何在一页上显示多个Highcharts图表
- Highcharts可以从服务器加载数据,但不能更新
- 如何使用webview在React Native中使用Highcharts
- Highcharts热图上的多个轴
- Highcharts-显示noData覆盖和x轴标签
- HighCharts:3D柱形图在选择时更改边框颜色
- 如何使用队列呈现多个HighCharts以防止加载时间过长
- Highcharts动态更改标签
- 柱状图上的Highcharts工具提示
- Highcharts热图显示不正确