精华内容
下载资源
问答
  • vue表格展开行显示图表 Vue Chartkick (Vue Chartkick) Create beautiful JavaScript charts with one line of Vue. 用一行Vue创建漂亮JavaScript图表。 View demo 查看演示 Download Source 下载源 图表 ...

    vue表格展开行显示图表

    Vue Chartkick (Vue Chartkick)

    Create beautiful JavaScript charts with one line of Vue.

    用一行Vue创建漂亮JavaScript图表。

    图表 (Charts)

    Line chart

    折线图

    <line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart>

    Pie chart

    饼形图

    <pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>

    Column chart

    柱形图

    <column-chart :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>

    Bar chart

    条形图

    <bar-chart :data="[['Work', 32], ['Play', 1492]]"></bar-chart>

    Area chart

    面积图

    <area-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></area-chart>

    Scatter chart

    散点图

    <scatter-chart :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></scatter-chart>

    Geo chart - Google Charts

    地理图表-Google图表

    <geo-chart :data="[['United States', 44], ['Germany', 23], ['Brazil', 22]]"></geo-chart>

    Timeline - Google Charts

    时间轴-Google图表

    <timeline :data="[['Washington', '1789-04-29', '1797-03-03'], ['Adams', '1797-03-03', '1801-03-03']]"></timeline>

    Multiple series

    多个系列

    data = [
      {name: 'Workout', data: {'2017-01-01': 3, '2017-01-02': 4}},
      {name: 'Call parents', data: {'2017-01-01': 5, '2017-01-02': 3}}
    ];
    
    // and
    <line-chart :data="data" />

    对超时说再见 (Say Goodbye To Timeouts)

    Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

    使您的页面加载速度超快,而不必担心超时问题。 给每个图表自己的端点。

    <line-chart data="/stocks"></line-chart>

    选件 (Options)

    Id, width, and height

    ID,宽度和高度

    <line-chart id="users-chart" width="800px" height="500px"></line-chart>

    Min and max values

    最小值和最大值

    <line-chart :min="1000" :max="5000"></line-chart>

    min defaults to 0 for charts with non-negative values. Use null to let the charting library decide.

    对于具有非负值的图表, min默认值为0。 使用null可让制图库确定。

    Colors

    色彩

    <line-chart :colors="['#b00', '#666']"></line-chart>

    Stacked columns or bars

    堆积的柱或条

    <column-chart :stacked="true"></column-chart>

    Discrete axis

    离散轴

    <line-chart :discrete="true"></line-chart>

    Label (for single series)

    标签(单个系列)

    <line-chart label="Value"></line-chart>

    Axis titles

    轴标题

    <line-chart xtitle="Time" ytitle="Population"></line-chart>

    Straight lines between points instead of a curve

    点之间的直线而不是曲线

    <line-chart :curve="false"></line-chart>

    Show or hide legend

    显示或隐藏图例

    <line-chart :legend="true"></line-chart>

    Specify legend position

    指定图例位置

    <line-chart legend="bottom"></line-chart>

    Donut chart

    甜甜圈图

    <pie-chart :donut="true"></pie-chart>

    Prefix, useful for currency - Chart.js, Highcharts

    前缀,对货币有用-Chart.js,Highcharts

    <line-chart prefix="$"></line-chart>

    Suffix, useful for percentages - Chart.js, Highcharts

    后缀,对百分比有用-Chart.js,Highcharts

    <line-chart suffix="%"></line-chart>

    Set a thousands separator - Chart.js, Highcharts

    设置一个千位分隔符-Chart.js,Highcharts

    <line-chart thousands=","></line-chart>

    Set a decimal separator - Chart.js, Highcharts

    设置小数点分隔符-Chart.js,Highcharts

    <line-chart decimal=","></line-chart>

    Show a message when data is empty

    当数据为空时显示一条消息

    <line-chart :messages="{empty: 'No data'}"></line-chart>

    Refresh data from a remote source every n seconds

    n秒刷新一次来自远程源的数据

    <line-chart :refresh="60"></line-chart>

    You can pass options directly to the charting library with:

    您可以使用以下方法将选项直接传递到制图库:

    <line-chart :library="{backgroundColor: '#eee'}"></line-chart>

    See the documentation for Google Charts, Highcharts, and Chart.js for more info.

    有关更多信息,请参见Google ChartsHighchartsChart.js的文档。

    数据 (Data)

    Pass data as an array or object

    将数据作为数组或对象传递

    <pie-chart :data="{'Blueberry': 44, 'Strawberry': 23}"></pie-chart>
    <pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>

    Times can be a Date, a timestamp, or a string (strings are parsed)

    时间可以是Date ,时间戳或字符串(已解析字符串)

    <line-chart :data="[[new Date(), 5], [1368174456, 4], ['2017-01-01 00:00:00 UTC', 7]]"></line-chart>

    下载图表 (Download Charts)

    Chart.js only

    仅Chart.js

    Give users the ability to download charts. It all happens in the browser - no server-side code needed.

    使用户能够下载图表。 这一切都发生在浏览器中-无需服务器端代码。

    <line-chart :download="true"></line-chart>

    Set the filename

    设置文件名

    <line-chart download="boom"></line-chart>

    Note: Safari will open the image in a new window instead of downloading.

    注意: Safari会在新窗口中打开图像,而不是下载图像。

    安装 (Installation)

    Run

    yarn add chartkick vue-chartkick

    Chart.js (Chart.js)

    Run

    yarn add chart.js

    And add

    并添加

    import Chartkick from 'chartkick'
    import VueChartkick from 'vue-chartkick'
    import Chart from 'chart.js'
    
    Vue.use(VueChartkick, { Chartkick })

    Google图表 (Google Charts)

    Add

    import Chartkick from 'chartkick'
    import VueChartkick from 'vue-chartkick'
    
    Vue.use(VueChartkick, { Chartkick })

    And include on the page

    并包括在页面上

    <script src="https://www.gstatic.com/charts/loader.js"></script>

    高图 (Highcharts)

    Run

    yarn add highcharts

    And add

    并添加

    import Chartkick from 'chartkick'
    import VueChartkick from 'vue-chartkick'
    import Highcharts from 'highcharts'
    
    window.Highcharts = Highcharts
    Vue.use(VueChartkick, { Chartkick })

    没有纱线或NPM (Without Yarn or NPM)

    Include the charting library

    包括图表库

    <script src="https://unpkg.com/[email protected]/dist/Chart.bundle.js"></script>
    

    And then the Chartkick libraries

    然后是Chartkick库

    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue-chartkick.js"></script>
    

    (Example)

    <div id="app">
      <line-chart :data="chartData"></line-chart>
    </div>
    
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
        }
      })
    </script>

    翻译自: https://vuejsexamples.com/create-beautiful-javascript-charts-with-one-line-of-vue/

    vue表格展开行显示图表

    展开全文
  • 因为优化表格在网上有很多中文文档,所以这里没必要再重复。但是我会结合使用过程中产生的问题,做一些说明。表格注意事项默认设置(许多文档没有设置默认值这一配置项,这里指出一下,phpexcel有些配置是可以设置成...

    PHPExcel的强大之处就是可以让我这样不会excel程序员,也能生成好看的表格,绘制合适的图表。
    本篇文章重点是如何绘制图表和组合图表。因为优化表格在网上有很多中文文档,所以这里没必要再重复。但是我会结合使用过程中产生的问题,做一些说明。

    表格注意事项

    默认设置(许多文档没有设置默认值这一配置项,这里指出一下,phpexcel有些配置是可以设置成默认的,下面是一个水平垂直居中的设置)

    $resultPHPExcel->getActiveSheet()->getDefaultStyle()->getAlignment()->setHorizontal(\PHPExcel_Style_Alignment::HORIZONTAL_CENTER);
    $resultPHPExcel->getActiveSheet()->getDefaultStyle()->getAlignment()->setVertical(\PHPExcel_Style_Alignment::VERTICAL_CENTER);
    

    单元格宽度默认(可能是对中文支持不好,默认宽度在使用中文时经常失效,建议使用实际宽度设置)

    $resultPHPExcel->getActiveSheet()->getColumnDimension($columnID)->setAutoSize(true);
    $resultPHPExcel->getActiveSheet()->getColumnDimension($columnID)->setWidth(20);
    

    设置填充颜色或整行字体(虽然phpexce支持行的设置,但是存在单元格合并时,正行设置会失效,建议去单元格设置)
    先看一下我项目中生成的一些图表
    纯代码生成,我隐藏了一些信息

    图表

    折线图

    //绘制图表标签(图表中代表类型的标签,比如折线图,哪条线对应什么分类。)
    $labels = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$4',null,1),
                /**实例化这个类时带有4个参数,
    第一个需要配置数据类型(数据类型不正确绘制不出折线)
    第二个为取值的单元格($sheet_title,是我项目中的一个变量,保存的时sheet页的标题。后跟着的$A$4即为对应单元格)
    第三个参数做什么我也不清楚…….
    第四个参数为所取单元格数量,这里只取了一个参数即值为1
    (实践出真理,当数据可变,比如一个库表每天导出的数据量都不同的时候,第四个参数可以不用配置。所以这里的参数没多大用,但是为了数据规范,如果数据固定,最好配置)**/
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$5',null,1),
                ); 
    //绘制图表X轴(即图表中X轴的取值,Y轴和excel一样自动生成不需要配置。)
            $xlabels = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$D$2:$'.$columnID.'$2',null,$sum
                    )
                ); 
    //绘图所需要的数据(即对应X轴所取的值)
            $datas = array(
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$D$4:$'.$columnID.'$4',null,$sum
                    ),
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$D$5:$'.$columnID.'$5',null,$sum
                    ),
                ); 
    //这里是搭建一个图表的整体框架。
            $series = array(
                new \PHPExcel_Chart_DataSeries(
                //这里设置生成图表类型(折线图,柱状图,饼状图…)
                    \PHPExcel_Chart_DataSeries::TYPE_LINECHART,
                //设置当前图表展示类型(堆积,非堆积,百分比),根据不同图表设置不同。
                    \PHPExcel_Chart_DataSeries::GROUPING_STANDARD,
                //这里需要返回一个数组,有多少条数据需要多少长度的数组。
                    range(0, count($datas)-1),
                //标签
                    $labels,
    
                //X轴数据
                    $xlabels,
                //绘图所需数据
                    $datas
                    )
                ); 
    //这里是对图表的布局(在图表上显示值,或者百分比,还有其他一些参数配置。可参考相应类文件)
            $layout = new \PHPExcel_Chart_Layout();
            $layout->setShowVal(true);
    //这里和布局类配合使用,将布局添加到图表中。
            $areas = new \PHPExcel_Chart_PlotArea(null,$series);
    
    
          //这里设置标签的显示位置(上,下,左,右,左上,右上给相应参数就行)
      $legend=new \PHPExcel_Chart_Legend(\PHPExcel_Chart_Legend::POSITION_BOTTOM,$layout,false);
    //这里设置图表的title 即表头标题
            $title = new \PHPExcel_Chart_Title('曝光量KPI每日达成情况');
    //最后一步,生成一个图表
            $chart = new \PHPExcel_Chart(
                'line_chart', //图表名称,可理解为我们常使用的图1,图2…
                $title,    //图表标题,和上面的名称不同
                $legend, //图表标签的位置
                $areas,  //构建好的图表框架
                true,     //没使用过
                false,  //没使用过(感觉没什么用,好奇的可以翻文档研究)
                null,  //x轴单位,配置类似title
                null   //x轴单位,配置类似title
                ); 
    //图表在excel中生成的位置。
            $chart->setTopLeftPosition('A11')->setBottomRightPosition($xcellID.'26');
    //将图表插入到当前sheet页中。
            $resultPHPExcel->getActiveSheet()->addChart($chart);
    //最后还有一个非常重要也容易遗漏的地方。在生成excel时要配置一下两行代码,两个要点,第一行生成2007版的excel,之前的版本不能生成图表,第二行的意思是,excel中要包含图表,默认为flase,需要配置。
    $xlsWriter = new \PHPExcel_Writer_Excel2007($resultPHPExcel);
    $xlsWriter->setIncludeCharts(true);
    

    一个简单的图表搭建就完成了,根据以上步骤在excel画出一个图表,应该没什么问题。
    代码生成的折线图

    饼图

    因为折线图已经给出很详细的注释,这里将不再啰嗦,只分析两种图表不一样的地方。
    $labels = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+15),null,1),
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+16),null,1),
                );  //取绘制图表标签
            $xlabels = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+15).':$A$'.($j+16),null,2
                    )
                ); //取图表x轴坐标
            $datas = array(
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$B$'.($j+15).':$B$'.($j+16),null,2
                    ),
                ); //绘图需要数据
            $series = array(
                new \PHPExcel_Chart_DataSeries(
                    //这里定义这个图表为饼图(phpexcel每种图对应的参数,在他类文件里都有定义。)
                    \PHPExcel_Chart_DataSeries::TYPE_PIECHART,
                    //饼图类型(百分比)
                    \PHPExcel_Chart_DataSeries::GROUPING_PERCENT_STACKED,
                    range(0,1),
                    $labels,
                    $xlabels,
                    $datas
                    )
                ); //根据取得的东西做出一个图表框架
            $layout = new \PHPExcel_Chart_Layout();
            // $layout->setShowVal(true);
            $layout->setShowPercent(TRUE);
            $areas = new \PHPExcel_Chart_PlotArea($layout,$series);
            $legend =new \PHPExcel_Chart_Legend(\PHPExcel_Chart_Legend::POSITION_RIGHT,$layout,false);
            $title = new \PHPExcel_Chart_Title('时间完成比例');
            $chart = new \PHPExcel_Chart(
                'line_chart',
                $title,
                $legend,
                $areas,
                true,
                false,
                null,
                null
                );//生成一个图标
            $chart->setTopLeftPosition('A81')->setBottomRightPosition('C101');
            $resultPHPExcel->getActiveSheet()->addChart($chart);
    

    从两个图表的配置可以看出,其实参数的设置都是一样的。只有后面的图表类型需要设置。
    生成的饼图示例

    组合图
    组合图即为一个图表中有两种类型的图。因为一些项目的需要,要在一个图表中对比两种类型数据的走势。所以出现组合图。
    绘制组合图的思路其实很简单,就是将两种类型类标签,两种类型类数据组合到一个图表中,X轴不变。(这里PHPExcel有个没中不足的地方,不能生成次坐标轴。也就是我们说的双Y轴。因为两类数据可能相差太大,无法很感官的看出对比。解决方法只能在生成图表之后,通过excel,手动生成次坐标轴。)

    //设置第一个标签
    $labels1 = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+31),null,1),
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+33),null,1),
                );
            //设置第二个标签(这里注意,对应好每个标签对应的数据和图表类型,比较容易混乱)  
            $labels2 = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+32),null,1),
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$A$'.($j+34),null,1),
                );
            //设置X轴(两种图都使用同一X轴)  
            $xlabels = array(
                new \PHPExcel_Chart_DataSeriesValues('String',$sheet_title.'!$C$'.($j+30).':$'.$columnID.'$'.($j+30),null,10
                    )
                ); 
    //对应第一个标签取得数据。
            $datas1 = array(
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$C$'.($j+31).':$'.$columnID.'$'.($j+31),null,10
                    ),
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$C$'.($j+33).':$'.$columnID.'$'.($j+33),null,10
                    )
                );
    
    
           //生成一个图表框架,这里生成第一个图表柱状图。
    $series1 = new \PHPExcel_Chart_DataSeries(
                        \PHPExcel_Chart_DataSeries::TYPE_BARCHART,
                        \PHPExcel_Chart_DataSeries::GROUPING_CLUSTERED,
                        range(0,1),
                        $labels1,
                        $xlabels,
                        $datas1
                    );  
    //这里有个重要的配置,主要的对第一个图表柱状图绘图方式的设置。(横着展示还是竖着展示)
            $series1->setPlotDirection(\PHPExcel_Chart_DataSeries::DIRECTION_COL);
    //对应第二个标签取第二个图表的数据
            $datas2 = array(
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$C$'.($j+32).':$'.$columnID.'$'.($j+32),null,10
                    ),
                new \PHPExcel_Chart_DataSeriesValues('Number',$sheet_title.'!$C$'.($j+34).':$'.$columnID.'$'.($j+34),null,10
                    )
                );
            //同样生成第二个图表框架,这里是一个折线图
            $series2 = new \PHPExcel_Chart_DataSeries(
                        \PHPExcel_Chart_DataSeries::TYPE_LINECHART,
                        \PHPExcel_Chart_DataSeries::GROUPING_STANDARD,
                        range(0,1),
                        $labels2,
                        null,
                        $datas2
                    ); 
            $layout = new \PHPExcel_Chart_Layout();
            // $layout->setShowVal(true);
            $layout->setShowPercent(TRUE);
    //将两个图表组合都一起  到这里基本上就完成了组合图的生成。
            $areas = new \PHPExcel_Chart_PlotArea($layout,array($series1, $series2));
            $legend =new \PHPExcel_Chart_Legend(\PHPExcel_Chart_Legend::POSITION_RIGHT,$layout,false);
            $title = new \PHPExcel_Chart_Title('网络每日费用情况(单位:万)');
            $chart = new \PHPExcel_Chart(
                'line_chart',
                $title,
                $legend,
                $areas,
                true,
                false,
                null,
                null
                );//生成一个图标
            $chart->setTopLeftPosition('A1')->setBottomRightPosition('J20');
            $resultPHPExcel->getActiveSheet()->addChart($chart);
    

    这里写图片描述
    这里生成的组合图,因为不能设置次坐标轴,数据相差又太多,所以柱状图的长度根本看不清。
    解决方法可以通过excel手工设置。
    这里写图片描述
    这里选择次坐标轴就可以生成可视的比较好看的图表。
    这里写图片描述

    ps:图表结果可能跟代码对应不上,不过不影响代码生成结果。因为太懒没有再去编辑代码,所以直接拷贝是无法使用,有兴趣的可以自己下载PHPExcel动手试一试,实践出真理!

    做一个小总结,其实使用PHPExcel 生成图表的思路还是挺清晰的。而且和直接使用excel绘制图的思路差不多。首先需要取到X轴的值,数据,对应的标签(标签的作用主要还是方便看出对应哪一类型)。然后建立一个图表类型,将取到的值构建成一个图表。最后再通过图表的配置,设置一些边边角角,如名称啊,标题啊什么的。
    组合图表也不复杂,就是构建图表的时候,将两个图表类型放到一个数组中,合并成一个图表。
    需要注意的地方,注释里也有指出。最主要的还是要实践,因为相应的文档太少,只有实践才能知道,哪些参数必须配置,哪些参数可以不配置(项目需要)。

    展开全文
  • 将Highcharts图表数据生成Table表格

    千次阅读 2015-12-28 15:08:31
    有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了。  首先,先显示统计图。  ...

    有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了。

      首先,先显示统计图。

      Html----通过一个查询按钮,根据查询条件,查询满足条件的数据,显示到统计图中。

    <a onclick="Query();" >查询</a>
    <center>
       <div id="chartPro" style="width: 80%"></div>
       <div id="container" style="width:700px;hight:70px"></div>
     </center>
    

      JS------生成统计图,生成表格

    复制代码
     1      function Query(){
     2          /* 获取查询条件------start------ */
     3          var tradTp=document.getElementById( "tradTp").value;//所属行业
     4          var county=document.getElementById( "county").value;//所属区县
     5          var replDtS=document.getElementById("replDtS").value;//批复时间,开始
     6          var replDtE=document.getElementById("replDtE").value;//批复时间,结束
     7          var radios = document.getElementsByName('type');
     8          var countyRad=radios[0];
     9          var trapTpRad=radios[1];
    10          var chartTp;
    11          if(countyRad.checked==true){
    12              chartTp=countyRad.value;
    13          }
    14          if(trapTpRad.checked==true){
    15              chartTp=trapTpRad.value;
    16          }
    17          /* 获取查询条件------end------ */
    18           $.ajax({
    19              type:"post",
    20              dataType:"json",
    21              data: {"project.tradTp":tradTp,"project.county":county,"project.replDtS":replDtS,"project.replDtE":replDtE,"project.chartTp":chartTp},
    22              async:false,
    23             url : "<%=basePath%>wiassess/projectMgr/projectMgrAction!getProjectChart.action",
    24             success : function(result) {
    25                 var jsonData = result;
    26                 var xdata = jsonData.xdata;  //获取横坐标数组
    27                 var data = jsonData.data;    //获取显示数据
    28                 var titleTm = jsonData.title; //获取标题
    29                 var chart = new Highcharts.Chart(  //生成统计图表
    30                         {
    31                             chart : {
    32                                 renderTo : 'chartPro',  //指向要生成图表的div的Id
    33                                 type : 'column',        //柱形图类型
    34                                 margin : 75,            //以下是样式设置
    35                                 options3d : {
    36                                     enabled : true,
    37                                     alpha : 0,
    38                                     beta : 0,
    39                                     depth : 50,
    40                                     viewDistance : 25
    41                                 }
    42                             },
    43 
    44                             title : {
    45                                 text : titleTm    //显示标题
    46                             },
    47                             credits : {//不显示highchart超链接
    48                                 enabled : false
    49                             },
    50                             plotOptions : {
    51                                 column : {
    52                                     depth : 10,
    53                                     value : 0,
    54                                     width : 1
    55                                 }
    56                             
    57                             },
    58                             yAxis : {
    59                                 title : {
    60                                     text : '单位:立方米'
    61                                 }
    62                             },
    63                             xAxis : {
    64                                 categories : xdata
    65                             },
    66                             tooltip : {  //鼠标移至柱形图上提示数据格式
    67                                 shared : true,
    68                                 useHTML : true,
    69                                 headerFormat : '<small>{point.key}</small><table>',
    70                                 pointFormat : '<tr><td style="color: {series.color}">{series.name}: </td>'
    71                                         + '<td style="text-align: right"><b>{point.y} 立方米</b></td></tr>',
    72                                 footerFormat : '</table>',
    73                                 valueDecimals : 2
    74                             },
    75                             series: [{
    76                                 name:'取水总量',
    77                                 data: data
    78                             }]
    79                         });
    80             },
    81             error: function(){
    82                 alert('获取失败!');
    83             }
    84         });
    85          //生成表格
    86         HighchartsToTable($("#chartPro"),$("#container"),("(单位:立方米)"));
    87     }
    复制代码

       下面是这篇博客的主题了,生成表格的JS文件chartToTable.js

      

    按 Ctrl+C 复制代码
     /**
     2      * 将Highcharts图表数据生成Table表格
     3      * @param div  统计图表的div的Id
     4      * @param table  要生成表格的div的Id
     5      * @param unitName  各个统计图的单位信息
     6      */
     7     function HighchartsToTable(div,table,unitName) {
     8         //获取图表对象
     9         var chart = div.highcharts();
    10         if (chart != null) {
    11             //获取X轴集合对象
    12             var categories = chart.xAxis[0].categories;
    13             //获取series集合
    14             var seriesList = chart.series;
    15             //获取标题
    16             var title = chart.title.textStr;
    17             //先清空原表格内容
    18             table.html("");
    19             //获取表格div对象
    20             var tableObj = table;
    21             //定义行元素<tr></tr>
    22             var tr;
    23             //定义表格体<table></table>
    24             var tab;
    25             tab = $("<table cellspacing='1' cellpadding='1'  width='100%' style=\"border:solid #add9c0; border-width:1px 0px 0px 1px;text-align:center;margin: 2px;\" ></table>")
    26             tab.appendTo(tableObj);
    27             //第一行,放置标题
    28             tr = $("<tr></tr>");
    29             tr.appendTo(tab);
    30             var td = $("<td colspan='" + categories.length + 1 + "' style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\" >" + title +"<b style=\"font-size:14px;font-family:'Times New Roman','Microsoft YaHei';float:right\">"+unitName+"</b>"+ "</td>");
    31             td.appendTo(tr);
    32             //下一行,放置数据
    33             tr = $("<tr ></tr>")
    34             tr.appendTo(tab);
    35             td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\"></td>");
    36             td.appendTo(tr);
    37             for ( var i = 0; i < categories.length; i++) {
    38                 td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + categories[i] + "</td>");
    39                 td.appendTo(tr);
    40             }
    41             //分批插入数据
    42             for ( var i = 0; i < seriesList.length; i++) {
    43                 tr = $("<tr></tr>");
    44                 tr.appendTo(tab);
    45                 //先加入一个序列名称
    46                 td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + seriesList[i].name + "</td>");
    47                 td.appendTo(tr);
    48                 //遍历数据点追加数据值
    49                 for ( var j = 0; j < seriesList[i].data.length; j++) {
    50                     td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;align:center\">" + seriesList[i].data[j].y + "</td>");
    51                     td.appendTo(tr);
    52                 }
    53             }
    54         } else {
    55             alert("获取图表对象失败!");
    56             }
    57     }
    58     
    按 Ctrl+C 复制代码

     

      统计图生成表格的大概思路就是,获取统计图上的数据,然后生成一个表格,在表格里遍历获取到的数据。生成的表格的样式可以单独放在style文件里,我这里还没有整理,所以全写在动态生的html里,了解了大概思路,就可以根据具体情况生成你想要的表格了。具体样式如下。(部分有关系统业务的地方打了马赛克,大概看个样子吧,嘻嘻

    展开全文
  • Latex如何在表格下方显示注脚

    千次阅读 2019-12-27 23:12:22
    如下图所示,使用Latex输出如下样式的表格,需要在表格下方加入注脚,如何操作? 原始表格的代码如下: \begin{table}[] \begin{tabular}{cccc} \hline & B1 &B2 & B3\\ \hline A1 & 0.1 &...

    1. 问题描述

    如下图所示,使用Latex输出如下样式的表格,需要在表格下方加入注脚,如何操作?

    原始表格的代码如下:

    \begin{table}[]
          \begin{tabular}{cccc}
            \hline
               & B1  &B2   & B3\\ \hline
            A1 & 0.1 & 0.2 & 0.3\\
            A2 & ... & ..  & .\\
            A3 & ..  & .   & .\\ \hline
          \end{tabular}
    \end{table}
    

    2. 解决方案

    • 首先,在Latexload packges部分导入threeparttable
     \usepackage{threeparttable}
    
    • 原始表格代码中,加入注脚,代码更改如下:
    \begin{table}[]
    \begin{threeparttable} %添加此处
          \begin{tabular}{cccc}
            \hline
               & B1  &B2   & B3\\ \hline
            A1 & 0.1 & 0.2 & 0.3\\
            A2 & ... & ..  & .\\
            A3 & ..  & .   & .\\ \hline
          \end{tabular}
          \begin{tablenotes} %添加此处
    		\item here are tablenotes. %添加此处
         \end{tablenotes} %添加此处
    \end{threeparttable} %添加此处
    \end{table}
    

    得到如下已添加注脚的表格:

    问题解决,完结撒花!

    展开全文
  • Matlab在图表标题中显示字符和变量,并对其分行显示
  • 如何excel图表显示上标下标

    千次阅读 2013-01-25 02:08:54
    1. 用字体属性修改是不可行的2. 方案是,从下面网页,复制粘贴http://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts
  • 首先这种情况,我网上看到了好多人问,确实也有正解,但是...原来刚刚遇到这个问题的时候,是点击多个tab选项之后,出现了地图不显示的情况,然后呢,我就一直根据打开多个tab之后,地图不显示这个思路进行寻找bu
  • 想不到好的办法,后台就把id和名字一起传过来了,但id又不能显示出来。   下面是给相应模块添加点击事件的代码: function eConsole(param) {  alert(param.name);//点击处的名字 alert(param.value...
  • 先给大家一个效果图: 左侧是word模板,右侧是生成后的word文档。 工作中经常用到会有...需要先将模板word转化为xml,而且模板word中写好的占位符${obj}也会转化为xml后被拆分开,还需要人工处理一次...
  • python中pyplot图表中文正常显示

    千次阅读 2019-05-29 11:59:11
    pyplot制图默认不支持中文显示,例如如下代码,图表为 # -*- coding:utf-8 -*- # author:qyy time:2019-5-29 import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] # 设置图标标题,并给坐标轴添加标签 plt....
  • 开始执行场景计划后,controller里,run选项卡中间区域应该展示的......,这个里面哪个选项置灰了,就代表当前一次能显示几个图表。如下图,则表示能显示4个图表。 第二步,选择Giew->Hide Available Gr...
  • 有一个小的应用点,很多Tableau用户找不到解决的方法,那就是:工作表里面,如何只显示部分标签,其他的不想显示。 例如:下面这个标签杂乱甚至重叠的折线图,看起来是不是特别凌乱,甚至不知道标签显示的是哪个...
  • 参考资料:React Native使用百度Echarts显示图表 前言: 1.Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。 2.Echarts组件是兼容IOS和安卓双平台的。 安装: React Native项目中安装...
  • Echarts图表中动态数据显示

    万次阅读 2017-01-22 15:46:48
    ECharts,一个纯 Javascript 的图表库,可以流畅的运行 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互...
  • 所以,你可能只想以一个空白的区域来显示缺失的数据,不这个区域中绘制任何东西。FusionCharts可以让这个目标很容易的实现。 用户可以通过不提供任何值到需要隐藏的相应元素来隐藏任意数量的数据块。 具体操作...
  • Python数据统计(用4种图表显示)

    千次阅读 2019-09-09 08:53:49
    matplotlib画四种图表的实例 def findPositionClassify(self): sql = "select avg(job_meansalary),job_taskid,task_title from job_position,job_collect_task where "+\ "job_position.job_ta...
  • echarts图表数据为空的时候会显示气泡,可以根节点添加下面的属性实现不显示气泡只显示文字“暂无数据”: noDataLoadingOption :{ text: '暂无数据', effect:'bubble', effectOption : { effect: { n: 0 //气泡个...
  • node-red自定义节点B–动态显示UI图表 节点A、节点B联合使用Demo效果 github源码地址 node-red介绍 node-red自定义节点A–获取主机CPU使用率 新建文件夹,并且新建三个文件 os-info....
  • Markdown中插入表格时只需要复制一下下面【】内的即可(注意:不要复制【】)。 说明: 两竖线|中间为一个单元格,每行列数即为每行竖线数-1; 行数-1为表格行数,因为第二行为配置行,配置表格显示用,并不显示...
  • 有一个小的应用点,很多Tableau用户找不到解决的方法,那就是:工作表里面,如何只显示部分标签,其他的不想显示。 例如:下面这个标签杂乱甚至重叠的折线图,看起来是不是特别凌乱,甚至不知道标签显示的是哪个点...
  • 利用Echarts图表的tooltip做一个图表

    千次阅读 2017-09-29 10:38:22
    小编最近遇到一个需求,需要折线图上做一个图表,如下图: 这是已经做好的demo。http://gallery.echartsjs.com/editor.html?c=xry_8tQjib&v=1 先说说思路,利用折线图表的tooltip.formatter 看下面代码 ...
  • js-xlsx + handsontable + echarts 实现前端导入excel数据并生成echart报表 前言 最近都做类似 ERP 的项目,所以呢,又碰到一个比较变态的需求(至少对我来说是),前端导入 excel 文件, 然后浏览器里面预览和...
  • 上面的这个图表就是用Notes实现的,...我们在表格的第一行图表显示区设置好刻度,字体设置为Courier New,字体大小设置为7,然后每隔10个字符的距离记下刻度(10%,20%....)2. 在下面图表中每行创建一个显示时计算的
  • 多条折线同时显示在一个图里,并且带有一秒的动画过渡,这里的横坐标是定长,效果类似于谱线变化。 1.MainActivity.javapackage ldqzju.hellocharts;import android.os.Handler; import android.os.Message
  • 制作图表时,为了更直观地传达数据的规律和特征,有时候我们需要高亮显示图表系列中超出标准值或者界限值的数据,如下图演示,我们需要将大于80的数据以特殊的颜色区分,这时候应该怎么来实现呢?     很多人...
  • 人人都可以做的WebGIS·在线地图服务——将机场表格数据在线地图上显示 1.表格数据格式转为.xls格式若直接是这个格式就不用转 2.导入ArcMap中用 工具包中的 Excel转Table工具 将数据文件转换 为表并加载图层上...
  • 使用echarts中多个图表重新渲染或者同一个图表类型赋不同的数据,就可能会出现图表污染的问题,例如下面这种 这种是因为echarts为了节省效率,默认刷新图表会直接调用上一次的数据源,但不同的数据源出现就会出现...
  • 使用样式分隔符(Style Separator)来断开一个长长的图题,只在图表目录中显示前面一部分(句号前)的内容。 最简单的操作方法:Word 2010“文件”->"段落"的“显示/隐藏编辑标记”来显示或隐藏“样式分隔符...
  • 玩转图表android上使用ECharts

    千次阅读 2019-04-08 11:47:14
    做Android开发经常会需要画一些图表,自己写的话不仅麻烦而且工作量太大,所以一般都会采用第三方图表框架,现在给大家介绍一款功能非常丰富的图表框架 ECharts 。 准备 ECharts 是由百度开发提供的开源框架,主要...
  • 今天遇到了一个特备奇怪的问题,填充QTableWidget表格数据的时候,只能显示前三行的数据,第四行开始就不去显示数据,写个demo记录下备用。 错误代码: void TableInit() { QStringList headerLables; ui....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,420
精华内容 15,368
关键字:

如何在图表下面显示表格