JavaScript、

使用Highcharts制作简单图表

余生长醉 提交于 2019-12-09 17:03:33
今天我们要使用JavaScript图表 Highcharts 制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧。 步骤一 在网页中添加一个div。设置id,设置图表长、高。代码如下: <div id="container" style="width:100%; height:400px;"></div> 步骤二 添加JavaScript标签初始化图表, 放在网页任何地方都可,继续下面的jQuery代码: $(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); }); 上面的代码利用jQuey打开已准备好的代码文件,如果使用MooTools或者Prototype代替 $(function ()语法,会有一点不同。而且