`
单一色调
  • 浏览: 86088 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

highcharts动态填充X轴坐标值

 
阅读更多

使用highcharts绘制动态图表,很多时候需要动态构建X轴坐标的值。

 

将其返回一段Json数组即可,那么前台如何赋值进去呢?

 

setCategories (Array cateories, [Boolean redraw])Since 1.2.0
Set new categories for the axis.

Parameters

categories: Array
The new category names.
redraw: Boolean
Defaults to true. Whether to redraw the axis or wait for an explicit call to chart.redraw().

 

官网上给出了方法:

verChart.xAxis[0].setCategories(timList);

 

 请求ajax以后,将其填充进来即可!

 $.post(url,
    {pver:verid},
    function (response) {
        downList = response.downList;
        installList = response.installList;
        timList = response.timList;
        //设置Y轴坐标值
        verChart.series[0].setData(downList);
        verChart.series[1].setData(installList); 
        //设置X轴坐标值
        verChart.xAxis[0].setCategories(timList);
}, "json" );

 

 

分享到:
评论

相关推荐

    highcharts 动态指定 x y数据

    Highcharts是一款强大的JavaScript...总之,Highcharts提供了灵活的方式来动态指定和更新X、Y轴数据,无论是静态数据还是实时数据,都能通过适当的方法实现。通过组合使用各种特性,可以构建出丰富且响应式的图表应用。

    Highcharts动态实现报表

    2. **配置对象**:创建Highcharts图表时,需要一个配置对象,该对象包含了图表的所有设置,如类型(饼图、柱状图、线图等)、标题、数据系列、x轴和y轴的属性、颜色、工具提示、图例等。例如: ```javascript var ...

    Highcharts动态实现曲线图和饼型图的展示

    // 将年份数据填充到X轴分类 $.each(organData, function(i, item) { recodeArry.push(organData[i].record_date); }); // 初始化图表配置 chart = new Highcharts.Chart({ chart: { renderTo: 'container'...

    highcharts动态开发实例

    `highcharts.js`是Highcharts的核心库,而其他文件可能是辅助的脚本,比如用于处理动态数据加载或交互事件的函数。 `examples`目录可能包含了各种不同的图表示例,这些示例展示了如何使用Highcharts创建不同类型的...

    jquery highcharts动态加载多条数据表走势图代码

    jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码

    highcharts加载多条曲线数据

    3. **配置对象**:创建一个JavaScript对象,包含图表的配置信息,如标题、类型、数据、X轴和Y轴的设置等。例如,加载多条曲线数据的配置可能如下: ```javascript var chartOptions = { chart: { renderTo: '...

    jQueryhighcharts(动态js统计图表).rar

    《jQuery与Highcharts:动态JS统计图表的深度解析》 在现代Web开发中,数据可视化是不可或缺的一部分,它能够帮助用户快速理解复杂的信息。而jQuery和Highcharts的结合使用,为开发者提供了强大的工具来创建交互式...

    Highcharts json

    在"Highcharts实现的json提供数据的波浪线的实例"中,我们主要探讨如何利用Highcharts结合JSON数据来绘制动态的波浪线图表。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易读易写且对机器...

    highChart后台动态获取数据

    在"highChart后台动态获取数据"这个主题中,我们主要探讨如何利用HighCharts结合后端数据来创建动态图表。 1. **HighCharts基本结构与配置** HighCharts的基本结构包括一个HTML容器元素和JavaScript代码,用于初始...

    折线、双Y轴、不交叉、highcharts、按照日期分割线

    总结来说,创建一个具有双Y轴、不交叉折线、按日期分割线的Highcharts图表,需要正确配置X轴、Y轴,设置series,以及处理兼容性问题。在实际项目中,根据具体需求调整配置项,以达到理想的效果。

    java实现的highcharts与ajax结合动态实时获取数据更新图表

    本教程将探讨如何在Java后端与前端使用Highcharts和Ajax结合,动态地从服务器获取数据并更新图表。 一、Highcharts的基本概念与使用 Highcharts是基于HTML5 SVG的图表库,支持现代浏览器和IE6+(通过VML)。它提供...

    highcharts中文帮助文档

    Highcharts是一款功能强大的JavaScript图表库,它用于在网页上创建各种动态、交互式的图表。这款库支持多种图表类型,如柱状图、折线图、饼图、散点图等,能够帮助开发者轻松地将复杂的数据可视化。Highcharts中文...

    highcharts动态柱状曲线仪表盘图

    highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图

    cpu动态走势图jQuery及highcharts

    jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言

    highcharts的js文件

    1. 准备数据:数据通常以数组的形式存在,每个元素代表一个柱子,包括x轴和y轴的值。 2. 初始化选项:设置图表类型、标题、数据系列、X轴和Y轴的属性等。 3. 创建图表:在HTML页面中选择一个元素作为图表容器,然后...

    Highcharts动态曲线图(使用jna监视cpu使用率)

    接着,初始化Highcharts图表配置,包括标题、x轴、y轴、系列等信息。例如: ```html ; height: 500px;"> ``` ```javascript Highcharts.chart('container', { chart: { type: 'line', animation: Highcharts....

    Highcharts学习

    `labels`是用于设置坐标轴值显示的类,`formatter`允许我们自定义坐标轴数值的格式,`enabled`控制是否显示坐标值,`rotation`和`align`则用于设置标签的倾斜角度和水平对齐方式。`style`对象可以定制字体和颜色,...

    highcharts demo

    在“highcharts demo”这个项目中,我们看到它主要用于以时间作为X轴展示数据变化,这是一种常见的时间序列分析方式,广泛应用于数据分析和可视化场景。 Highcharts的核心特性包括: 1. **跨浏览器兼容性**:...

Global site tag (gtag.js) - Google Analytics