`

JS报表控件highcharts应用

 
阅读更多

1. 官网地址
 
2. 版权信息源码修改方法
    在 highcharts.js 中打到 credits 将其中的 enabled 属性由 true 改为 false。如果是经过压缩后的代码,则是由 !0 改为 0。
 
3. 官方学习示例地址
 
4. 官方API
 
5. 常用参数配置说明
    chart.events.addSeries:添加数列到图表中。
    chart.events.click:整个图表的绘图区上所发生的点击事件。
    chart.events.load:图表加载事件。
    chart.events.redraw:图表重画事件,当点击图注显示和隐藏绘图时可以触发。
    chart.events.selection:当图表曲线可选择放大时,当选择图表操作时,可以触发该事件。
    chart.height:所绘制图表的高度值。
    chart.inverted:图表中的x,y轴对换。
    chart.polar:是否为极性图表。
    chart.reflow:当窗口大小改变时,图表宽度自适应窗口大小改变。
    chart.renderTo:图表加载的位置,是页面上的一个DOM对象。
    chart.showAxes:在空白图表中,是否显示坐标轴。
    chart.type:图表的类型,默认为line,还有bar/column/pie……
    chart.width:图表绘图区的宽度,默认为自适应。
    chart.zoomType:图表中数据报表的放大类型,可以以X轴放大,或是以Y轴放大,还可以以XY轴同时放大。

    colors:图表中多数列时,各数列之间的颜色。是一个数组,一般不动。

    credits.enabled:是否允许显示版权信息。
    credits.href:版权所有的链接。
    credits.text:版权信息显示文字。

    exporting.buttons.exportButton.enabled:是否允许显示导出按钮。
    exporting.buttons.exportButton.menuItems:导出按钮的菜单选项。
    exporting.buttons.exportButton.onclick:导出按钮被点击的事件,不是内部的菜单。
    exporting.buttons.printButton.enabled:是否允许打印按钮。
    exporting.buttons.printButton.onclick:打印按钮的点击事件。
    exporting.enabled:打印和导出按钮是否被允许。
    exporting.filename:被导出文件的文件名。
    exporting.type:默认导出图片的文件格式。
    exporting.url:SVG图表转换并导出的接口处理地址。
    exporing.width:默认导出图片的宽度。

    labels:标签,可以加载到图表的任何位置,里面有items,style。

    lang:语言参数配置,与导出按钮菜单有关的配置,时间名称的配置等。

    legend.enabled:是否允许图注。

    navigation.buttonOptions.enabled:图表中所有导航中的按钮是否可被点击。

    plotOptions.area.allowPointSelect:是否允许数据点的点击。
    plotOptions.area.color:绘图的颜色。
    plotOptions.area.dataLabels.enabled:是否允许数据标签。
    plotOptions.area.enableMouseTracking:是否允许数据图表中,数据点的鼠标跟踪气泡显示。
    plotOptions.area.events.checkboxClick:数据图表中图注中复选框的点击事件。
    plotOptions.area.events.click:数据图表中,数据点的点击事件。
    plotOptions.area.events.hide:数据图表中,某一数据序列隐藏时的事件。
    plotOptions.area.events.show:数据图表中,某一数据序列显示时的事件。
    plotOptions.area.events.legendItemClick:数据图表中,图注中的项目被点击时的事件,直接赋值false,则不可点击。
    plotOptions.area.events.mouseOut:数据点的鼠标移出事件。
    plotOptions.area.events.mouseOver:数据点的鼠标经过事件。
    plotOptions.area.marker.enabled:图表中绘图中是否显示点的标记符。
    plotOptions.area.marker.states.hover.enabled:是否允许标记符的鼠标经过状态。
    plotOptions.area.marker.states.select.enabled:是否允许标记符的选择状态。
    plotOptions.area.point.events.click:图表中每一个单独的点点击事件。
    plotOptions.area.point.events.mouseOut
    plotOptions.area.point.events..mouseOver
    plotOptions.area.point.events.remove:删除图表中的点时的事件。
    plotOptions.area.point.events.select:图表中点选择事件。
    plotOptions.area.point.events.unselect:图表中点取消选择时的事件。
    plotOptions.area.point.events.update:图表中数据发生更新时的事件。
    plotOptions.area.visible:加载时,数据序列默认是显示还是隐藏。
    plotOptions.area.zIndex:在多序列的情况下,调整每一个序列的层叠顺序。
    以上的point.events同样还适用于其他面积类图表(arearange、areaspline、areasplinerange),其他的柱状图(bar、column)及所有图表。
    plotOptions.area.showInLegend:是否在图注中显示。
    plotOptions.area.stacking:是以值堆叠,还是以百分比堆叠。
    plotOptions.area.states.hover.enabled:鼠标放上的状态是否允许。
    plotOptions.area.stickyTracking:鼠标粘性跟踪数据点。
    plotOptions.arearange,plotOptions.areaspline,plotOptions.areasplinerange类同于plotOptions.area
    plotOptions.bar.groupPadding:对于柱状图分组,每个分组之间的间隔。
    plotOptions.bar.grouping:是否对数据进行分组。
    plotOptions.bar.minPointLength::定义当point值为零时,点的最小长度为多少
    plotOptions.bar.showInLegend:是否在图注中显示。
    plotOptions.bar.stacking:是以值堆叠,还是以百分比堆叠(normal/percent)。
    plotOptions.column,plotOptions.columnrange类同于plotOptions.bar
    plotOptions.line的相关配置类似于plotOptions.area配置。
    plotOptions.pie.ignoreHiddenPoint:在饼状图中,某一个序列经图注点击隐藏后,整个饼状图是重新以100%分配,还是只在原图基础上隐藏,呈现一个缺口。
    plotOptions.pie.innerSize:绘制饼状图时,饼状图的圆心预留多大的空白。
    plotOptions.pie.slicedOffset:与allowPointSelect结合使用,当点被点击时,对应的扇区剥离,这个参数即配置离开的距离。
    plotOptions.pie的其他常用配置参数类同于plotOptions.area。
    plotOptions.scatter,plotOptions.series,plotOptions.spline的相关配置类似于plotOptions.area配置。

    series:是一个数组。
    series.data.color:某一个数据的颜色。
    series.data.dataLabels:序列中某一个数据的数据标签。
    series.data.events类同于plotOptions.area.point.events的相关配置。
    series.data.marker类同于plotOptions.area.marker的相关配置。
    series.data.name:配置数据点的名称。
    series.data.sliced:配置在饼图中,扇区的分离距离大小。
    series.data.x:点的x值。
    series.data.y:点的y值。
    series.name:数据序列的名称。
    series.stack:堆叠的分组索引。
    series.type:数据序列的展示类型。
    series.xAxis,series.yAxis:当使用多坐标轴时,指定某个数列对应哪个坐标轴。

    subtitle:配置图表的子标题。

    title:配置图表的标题。

    tooltip:配置图表中数据的气泡提示。
    tooltip.valueDecimals:允许的小数点位数。
    tooltip.percentageDecimals:允许百分比的小数点后位数。

    xAxis,yAxis配置设置坐标轴
    allowDecimals:坐标轴上是否允许小数。
    categories:是一个数组,坐标轴的分类。
    plotLines:绘制主线。
    tickColor:刻度颜色。
    tickInterval:刻度的步进值。
分享到:
评论

相关推荐

    highcharts报表控件 jquery报表插件

    "highcharts报表控件"和"jquery报表插件"指的是使用Highcharts与jQuery结合,为网页构建动态、丰富的数据报表。 Highcharts支持多种图表类型,包括标题中提到的"饼图"和"柱形图",以及其他如线图、面积图、散点图、...

    报表 HighCharts

    ### 报表HighCharts使用教程 #### 一、HighCharts简介 HighCharts是一款非常流行的JavaScript图表库,它基于SVG(可缩放矢量图形...在未来的工作中,你可以尝试将HighCharts应用于更多实际场景中,探索其更多可能性。

    Highcharts图表控件

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种类型的交互式图表,包括折线图、柱状图、饼图、散点图等。这个控件以其强大的功能、良好的性能和易用性深受开发者喜爱。在...

    js 图表控件

    1. **库和框架**:JavaScript图表控件通常基于像D3.js、Chart.js、Highcharts、ECharts、Google Charts等知名的库或框架。这些库提供了丰富的API和配置选项,可以定制图表的样式、颜色、动画效果等,满足不同的设计...

    各种报表控件整理收集

    在IT行业中,报表控件是开发数据可视化应用的关键组成部分,特别是在商业智能(BI)和数据分析领域。本资源包“各种报表控件整理收集”显然是一份宝贵的资料集合,包含了多种主流的JavaScript图表库,用于创建饼图和...

    报表数据图片显示控件

    5. **开发工具与库**:开发报表数据图片显示控件时,开发者可以利用各种编程语言和框架,如JavaScript(D3.js, Chart.js, Highcharts等)、Python(Matplotlib, Plotly, Seaborn等)或R语言(ggplot2等)。...

    Highcharts-2.2.5源码

    - `highcharts.js`:核心的JavaScript库文件,包含Highcharts的所有功能。 - `highcharts.css`:基础样式文件,用于默认的图表样式。 - 示例文件:可能有多个HTML和JavaScript示例文件,展示了不同类型的图表和配置...

    android js统计报表

    通过WebView,开发者可以将JavaScript图表库如Highcharts、ECharts、Chart.js等引入到Android应用中,实现动态的统计报表展示。 "3D等多种统计报表"这部分意味着这个项目可能集成了多种类型的图表,例如柱状图、...

    报表案例代码

    其次,ASP.NET是一个微软开发的Web应用程序框架,其中包含多种报表控件,如GridView、Chart控件等,可用于创建原生的服务器端报表。在ASP.NET报表开发中,我们需熟悉C#语言,理解控件模型和事件驱动编程。例如,使用...

    各种图形报表组件

    Jquery是前端开发中广泛使用的JavaScript库,而基于Jquery的图表库如Highcharts、Chart.js和ECharts等则为Web应用提供了丰富的图表功能。这些库通常轻量级且易于使用,可以快速地在网页上实现动态图表。例如,...

    ASP.NET简单报表实例

    在报表场景中,JavaScript可能用于实现动态加载、数据验证、图表绘制等功能,比如使用库如jQuery、D3.js或Highcharts。 综上所述,"ASP.NET简单报表实例"是一个涵盖多方面技术的项目,不仅涉及到后端数据绑定和处理...

    c#各种图形报表开发实例

    这些框架可以与JavaScript库(如Highcharts、D3.js)结合,通过服务器端的C#处理数据,前端使用JavaScript进行交互式图表的渲染。这种前后端分离的方式使得报表不仅具有丰富的视觉效果,还能实现动态更新和交互功能...

    方便稳定,性能高的编程开发所需要的图表控件,

    例如,Java开发者可以使用JFreeChart,C#开发者可能选择DevExpress的图表组件,Python开发者可能会用到matplotlib或者plotly,JavaScript开发者则有D3.js或Highcharts等。 使用这些图表控件,开发者可以极大地提高...

    几款统计表显示控件

    在IT行业中,统计表显示控件是数据可视化领域的重要组成部分,尤其在数据分析、报表制作以及商业智能应用中占据着核心地位。这些控件允许开发者和用户以清晰、美观且易于理解的方式展示复杂的数据集。标题提到的“几...

    Asp.Net图形报表

    - 除了内置控件,Asp.Net开发者还可以利用如Highcharts、DevExpress、Telerik、Google Charts等第三方库,它们提供了更丰富的图表类型和更强大的交互功能。 5. **数据源的使用** - 数据可以来自多种来源,如SQL ...

    C#多形式报表源码 很强大

    这将涵盖数据可视化技术,如使用图表库(如Chart.js或Highcharts)创建各种图表,以及如何处理大数据量和实时更新的需求。 总之,这个" C#多形式报表源码"集合是一个宝贵的教育资源,涵盖了从后端数据处理到前端...

    ASP.NET导出报表

    在ASP.NET中,可以使用各种图表库,如Chart.js、Highcharts或ASP.NET AJAX Chart控件,来创建饼状图。这些库允许开发人员从数据库或其他数据源获取数据,动态生成饼状图,并自定义颜色、标签和数据点等属性。 5. **...

    springboot+vue 在线报表设计和大屏设计系统源码.zip

    Spring Boot是Java领域的轻量级框架,它简化了Spring应用程序的初始设置和配置,而Vue.js则是一种前端JavaScript框架,以其易学易用、灵活性高和性能优秀著称。 **Spring Boot知识点:** 1. **自动配置**:Spring ...

    asp.net Html5 图形报表

    利用JavaScript库如D3.js、Chart.js或Highcharts,开发者可以在这些元素上构建复杂的数据可视化。 2. **ASP.NET集成HTML5** ASP.NET提供了多种方式与HTML5结合,包括使用Razor视图引擎编写HTML5代码,或者使用ASP...

    asp.net各种报表统计图实现

    另一个常见的方式是利用JavaScript库,如Highcharts、D3.js或ECharts等,结合Asp.NET后端生成数据。这种方式允许在客户端生成高度交互的、动态的统计图。Asp.NET服务器端负责处理数据逻辑,然后通过JSON格式传递给...

Global site tag (gtag.js) - Google Analytics