精华内容
下载资源
问答
  • 主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及jQuery功能的具体实现方法,需要的朋友可以参考下
  • 百度查了很久没有找到关于dotnetbar制作柱状图的相关demo,现求教使用该控件制作简易柱状图,附带代码
  • 以下是一个用Flex布局的柱状图: HTML: 成绩分布直方图 <div><div>10</div></div> <div><div>8</div></div> <div><div>15</div></div> <div><div>12</div></div> <div><div>5</div></div> CSS: ....
  • 用Flex布局生成简易直方

    以下是一个用Flex布局的柱状图:
    柱状图
    HTML:

    <div class="his_box">
        <div>成绩分布直方图</div>
        <div class="histogram">
            <div><div>10</div></div>
            <div><div>8</div></div>
            <div><div>15</div></div>
            <div><div>12</div></div>
            <div><div>5</div></div>
        </div>
    </div>
    

    CSS:

    .his_box{ /*盒子*/
                width: 400px;
                height: 220px;
                border: solid 1px #1E90FF;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .histogram{ /*直方图*/
                display: flex;
            }
            .histogram>div{ /*一条图块*/
                width: 30px;
                height: 200px; /*100%时的块高度*/
                font-size: 14px;
                text-align: center;
                margin-right: 5px;
                display: flex;
                flex-direction: column-reverse;
            }
            .histogram>div:nth-child(3n) div{ /*图块颜色*/
                background-color: #ff404b;
            }
            .histogram>div:nth-child(3n+1) div{
                background-color: #99CCFF;
            }
            .histogram>div:nth-child(3n+2) div{
                background-color: #F0AD4E;
            }
            .histogram>div:nth-child(1) div{
                flex: 0 0 50%; /*20为100%,50%就是10*/
            }
            .histogram>div:nth-child(2) div{
                flex: 0 0 40%; /*8/20*/
            }
            .histogram>div:nth-child(3) div{
                flex: 0 0 75%; /*15/20*/
            }
            .histogram>div:nth-child(4) div{
                flex: 0 0 60%; /*12/20*/
            }
            .histogram>div:nth-child(5) div{
                flex: 0 0 25%; /*5/20*/
            }
    

    本例中,图块的最高点为20,每条柱子的高度按比例定义:第1条数据为10,高度是50%;第2条数据为8,高度为40%,以此类推。
    图块颜色采用3色循环使用。
    布局时,最外层容器使用了align-items: center;使容器内元素整体居中。
    直方图模块使用了display: flex;让模块中的柱子横向排列。
    每条柱子也是flex模块,但它的布局方向是纵向的,且方向是从下到上的 flex-direction: column-reverse;

    如果想做成纵向排列的直方图:
    直方图2
    CSS:

    .his_box{ /*盒子*/
                width: 400px;
                height: 220px;
                border: solid 1px #1E90FF;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .his_box>div{
                text-align: center;
            }
            .histogram{ /*直方图*/
                display: flex;
                flex-direction: column;
            }
            .histogram>div{ /*一条图块*/
                height: 30px;
                width: 200px; /*100%时的块宽度*/
                line-height: 30px;
                font-size: 14px;
                text-align: right;
                margin-bottom: 5px;
                display: flex;
            }
            .histogram>div:nth-child(3n) div{ /*图块颜色*/
                background-color: #ff404b;
            }
            .histogram>div:nth-child(3n+1) div{
                background-color: #99CCFF;
            }
            .histogram>div:nth-child(3n+2) div{
                background-color: #F0AD4E;
            }
            .histogram>div:nth-child(1) div{
                flex: 0 0 50%; /*20为100%,50%就是10*/
            }
            .histogram>div:nth-child(2) div{
                flex: 0 0 40%; /*8/20*/
            }
            .histogram>div:nth-child(3) div{
                flex: 0 0 75%; /*15/20*/
            }
            .histogram>div:nth-child(4) div{
                flex: 0 0 60%; /*12/20*/
            }
            .histogram>div:nth-child(5) div{
                flex: 0 0 25%; /*5/20*/
            }
    
    展开全文
  • Js+Css 制作简易柱状图

    千次阅读 2017-03-02 16:08:13
    //柱子背景路径 this .isshowHq = true ; //是否显示红旗 this .hqImg = "<img src='http://www.cnblogs.com/App_Themes/Default/Images/Primacy/hongqi.gif' Width='36px' Height='32px'/>" ; //红旗图片...
    fei = { jsimg: {} }
    fei.jsimg.histogram = function (x, y, data) {
        this.width = 800;                                                       //图片宽度
        this.height = 300;                                                      //图片高度
        this.barwidth = 50;                                                     //柱子宽度
        this.x = x || [1, 2, 3, 4, 5, 6];                                       //x轴刻度
        this.y = y || ["ZB1", "ZB2", "ZB3", "ZB4", "ZB5", "ZB6"];               //y轴刻度
        this.data = data || [0, 0, 0, 0, 0, 0];                                 //数据
        this.dataformat = "";                                                   //x轴和数据的格式:如 可表示为 "{0}%"
        this.vbarBg = "http://www.cnblogs.com/App_Themes/Default/Images/Primacy/kaohe.gif";      //柱子背景图路径
        this.isshowHq = true;                                                   //是否显示红旗
        this.hqImg = "<img src='http://www.cnblogs.com/App_Themes/Default/Images/Primacy/hongqi.gif' Width='36px' Height='32px'/>"; //红旗图片
    }
    
    fei.jsimg.histogram.prototype.draw = function () {
        this._set_max_value();
        this._draw_container();
        this._draw_container_rows();
        this._draw_container_cols();
    }
    
    fei.jsimg.histogram.prototype._set_max_value = function () {
        this.max_x = 0;
        this.max_data = 0;
        for (var i = 0; i < this.x.length; i++) {
            if (this.x[i] >= this.max_x) {
                this.max_x = this.x[i];
            }
        }
        for (var i = 0; i < this.data.length; i++) {
            if (this.data[i] >= this.max_data) {
                this.max_data = this.data[i];
            }
        }
    }
    
    fei.jsimg.histogram.prototype._draw_container = function () {
        this.histogramimg = document.createElement("ul"); //容器:ul
        this.addclass(this.histogramimg, "fei_histogram_container_style");
        this.histogramimg.style.cssText = "height: " + this.height + "px !important;" + "width: " + this.width + "px;";
    }
    
    fei.jsimg.histogram.prototype._draw_container_rows = function () {
        this.rows = document.createElement("li"); //行的集合:结构为<li>{div集合}</li>
        this.addclass(this.rows, "fei_histogram_container_rows_style");
        this.rows.style.cssText = "height:" + this.height + "px";
    
        var xheigth = this.height / this.x.length; //行之间的间隔
        for (var i = this.x.length - 1; i >= 0; i--) {
            var row = document.createElement("div"); //单行:div
            row.style.cssText = "height:" + (xheigth - 1) + "px";
    
            var row_p = document.createElement("p"); //行的刻度文字:x轴刻度
            if (this.dataformat == "" || !this.dataformat) {
                row_p.innerHTML = this.x[i].toString();
            }
            else {
                row_p.innerHTML = this.dataformat.replace("{0}", this.x[i].toString());
            }
            row.appendChild(row_p);
    
            this.rows.appendChild(row);
        }
        this.histogramimg.appendChild(this.rows);
    }
    
    fei.jsimg.histogram.prototype._draw_container_cols = function () {
        var ywidth = this.width / this.data.length; //算出列宽
        var col_ul_li_left = (ywidth - this.barwidth) / 2;
        for (var i = 0; i < this.data.length; i++) {
            var col = document.createElement("li"); //列:li
            var left = i * ywidth; //列到x轴的距离
            this.addclass(col, "fei_histogram_container_col_style");
            col.style.cssText = "left: " + left + "px;height:" + (this.height + 1) + "px;width: " + ywidth + "px;";
            col.innerHTML = this.y[i].toString() + "<br/>";
            if (this.isshowHq && this.data[i] == this.max_data) {
                col.innerHTML += this.hqImg;
            }
    
    
            /*---柱子---*/
            var barul = document.createElement("ul");
            var barli = document.createElement("li");
            if (this.dataformat == "" || !this.dataformat) {
                barli.innerHTML = this.data[i].toString();
            }
            else {
                barli.innerHTML = this.dataformat.replace("{0}", this.data[i].toString());
            }
            barli.style.cssText = "height: " + this.data[i] * this.height / this.max_x + "px;" +
                "left: " + col_ul_li_left + "px;width: " + this.barwidth + "px;" +
                "background: url('" + this.vbarBg + "') no-repeat scroll 0 0 #DDDDDD;";
            barul.appendChild(barli);
    
    
            col.appendChild(barul);
    
            this.histogramimg.appendChild(col);
        }
    }
    
    fei.jsimg.histogram.prototype.addclass = function (elements, value) {
        if (!elements.className) {
            elements.className = value;
        }
        else {
            newClass = elements.className;
            newClass += " ";
            newClass += value;
            elements.className = newClass;
        }
    }
    
    fei.jsimg.histogram.prototype.render = function (id) {
        this.container = document.getElementById(id);
        this.draw();
        this.container.appendChild(this.histogramimg);
    }
      代码有很多不合理的地方 本来打算把柱子等元素提出来写成独立的类  但是。。。。为了省事,就这么写了。
    
    另外 还要Css支持,原理是Css控制ul实现。Css文件如下:
    
    .fei_histogram_container_style
    {
        background: none repeat-x scroll 0 0 #FFFFFF !important;
        border: 2px solid #0063BE;
        list-style: none outside none;
        margin: 0 4.8px 16px 35px;
        padding: 0;
        position: relative;
    }
    .fei_histogram_container_rows_style
    {
        left: 0;
        width: 100%;
        z-index: 1;
        bottom: 0;
        position: absolute;
        text-align: center;
    }
    .fei_histogram_container_rows_style div
    {
        border-top: medium none;
        position: relative;
        text-align: center;
        list-style: none outside none;
        border-top: 1px dotted #41A3E2;
    }
    .fei_histogram_container_rows_style div p
    {
        position: absolute;
        right: 101%;
        top: -11pt;
        text-align: center;
        list-style: none outside none;
    }
    
    .fei_histogram_container_col_style
    {
        bottom: 0px;
        position: absolute;
        text-align: center;
        border-right: 1px dotted #41A3E2;
        z-index: 2;
        list-style: none outside none;
    }
    
    .fei_histogram_container_col_style ul
    {
        list-style: none outside none;
        text-align: center;
    }
    
    .fei_histogram_container_col_style li
    {
        color: #000000;
        bottom: 0px;
        position: absolute;
        text-align: center;
        list-style: none outside none;
    }
      把这两文件引入到项目中,用法:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="fei_histogram.css" rel="stylesheet" type="text/css" />
        <script src="fei_histogram.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.onload = function () {
                var vbar = new fei.jsimg.histogram();
                vbar.x = [20, 40, 60, 80, 100, 120];
                vbar.y = ["Y1", "Y2", "Y3", "Y4", "Y5", "Y6","Y7"];
                vbar.data = [10, 33, 38, 26, 59, 92,96];
                //            vbar.width = 500;
                //            vbar.height = 200;
                //            vbar.dataformat = "{0}%";
                vbar.render("vbarTest");
            }
        </script>
    </head>
    <body>
        <div id="vbarTest">
        </div>
    </body>
    </html>
    展开全文
  • 1.在项目的build.gradle的allprojects添加 maven { url “https://jitpack.io” } allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } } 2.在app的build...

    1.在项目的build.gradle的allprojects添加 maven { url “https://jitpack.io” }

    allprojects {
        repositories {
            google()
            jcenter()
            maven { url "https://jitpack.io" }
        }
    }
    

    2.在app的build.gradle添加依赖。

    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
    

    3.activity_main.xml布局页面。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
       android:gravity="center"
        android:layout_height="match_parent">
        <com.github.mikephil.charting.charts.BarChart
            android:id="@+id/bar_chart"
            android:layout_width="500dp"
            android:layout_height="300dp"
            />
    
    </LinearLayout>
    

    3.MainActivity.java部分。

    package com.example.a86156.zhuxingtu;
    
    import android.graphics.Color;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    import com.github.mikephil.charting.charts.BarChart;
    import com.github.mikephil.charting.components.XAxis;
    import com.github.mikephil.charting.components.YAxis;
    import com.github.mikephil.charting.data.BarData;
    import com.github.mikephil.charting.data.BarDataSet;
    import com.github.mikephil.charting.data.BarEntry;
    import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
    import com.github.mikephil.charting.interfaces.datasets.IDataSet;
    
    import java.util.ArrayList;
    
    public class MainActivity extends AppCompatActivity {
        BarChart barChart;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            barChart = findViewById(R.id.bar_chart);
    
            initBarChart1();
    
        }
    
    
    
        private void initBarChart1() {
    
            barChart.setDrawValueAboveBar(true);  //设置所有的数值在图形的上面,而不是图形上
            barChart.setTouchEnabled(false);  //进制触控
            barChart.setScaleEnabled(false); //设置能否缩放
            barChart.setPinchZoom(false);  //设置true支持两个指头向X、Y轴的缩放,如果为false,只能支持X或者Y轴的当方向缩放
            barChart.setDrawBarShadow(false);  //设置阴影
            barChart.setDrawGridBackground(false);  //设置背景是否网格显示
            barChart.setDescription(""); //不描述
    
            //X轴的数据格式
            XAxis xAxis = barChart.getXAxis();
            xAxis.setValueFormatter(new MyFormatter());
            //设置位置
            xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
            //设置是否绘制网格线
            xAxis.setDrawGridLines(false);
            barChart.getAxisLeft().setDrawGridLines(false);
            // barChart.animateY(2500);
            //设置X轴文字剧中对齐
            xAxis.setCenterAxisLabels(false);
            //X轴最小间距
            xAxis.setGranularity(1f);
    
    
            //Y轴的数据格式
            YAxis axisLeft = barChart.getAxisLeft();
            axisLeft.setValueFormatter(new MyFormatter2());
            barChart.animateY(2500);
            //设置Y轴刻度的最大值
            axisLeft.setAxisMinValue(0);
            axisLeft.setAxisMaxValue(100);
            barChart.getAxisRight().setEnabled(false);
    
            //设置数据
            setData01();
    
        }
    
        //日对比的数据
        private void setData01() {
            ArrayList<BarEntry> yVals1 = new ArrayList<>();
                yVals1.add(new BarEntry(1, 36));
                yVals1.add(new BarEntry(2, 85));
                yVals1.add(new BarEntry(3, 20));
                yVals1.add(new BarEntry(4, 66));
                yVals1.add(new BarEntry(5, 32));
                yVals1.add(new BarEntry(6, 25));
                yVals1.add(new BarEntry(7, 56));
    
            BarDataSet set1;
            set1 = new BarDataSet(yVals1, "");
            //设置多彩 也可以单一颜色
            set1.setColor(Color.parseColor("#4169E1"));
            set1.setDrawValues(false);
            ArrayList<IBarDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1);
            BarData data = new BarData(dataSets);
            barChart.setData(data);
            barChart.setFitBars(true);
            //设置文字的大小
            set1.setValueTextSize(12f);
            //设置每条柱子的宽度
            data.setBarWidth(0.7f);
            barChart.invalidate();
    
            for (IDataSet set : barChart.getData().getDataSets())
                set.setDrawValues(!set.isDrawValuesEnabled());
            barChart.invalidate();
            barChart.setAutoScaleMinMaxEnabled(!barChart.isAutoScaleMinMaxEnabled());
            barChart.notifyDataSetChanged();
            barChart.invalidate();
    
        }
    
    
    }
    
    

    3.如果要改变x轴下面的数据描述格式,则需要再定义一个类MyFormatter并实现AxisValueFormatter这个接口。

    package com.example.a86156.zhuxingtu;
    
    import com.github.mikephil.charting.components.AxisBase;
    import com.github.mikephil.charting.formatter.AxisValueFormatter;
    
    import java.text.DecimalFormat;
    
    public class MyFormatter implements AxisValueFormatter {
    
        private DecimalFormat mFormat;
        String[] strings;
    
        public MyFormatter() {
            //格式化数字
            mFormat = new DecimalFormat("###,###,##0.0");
        }
    
        public MyFormatter(String[] strings) {
            this.strings = strings;
        }
    
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            if (value == 1) {
                return "周一";
            }
            if (value == 2) {
                return "周二";
            }
            if (value == 3) {
                return "周三";
            }
            if (value == 4) {
                return "周四";
            }
            if (value == 5) {
                return "周五";
            }
            if (value == 6) {
                return "周六";
            }
            if (value == 7) {
                return "周日";
            }
            return "";
        }
    
        @Override
        public int getDecimalDigits() {
            return 0;
        }
    }
    
    

    4.如果要改变y轴左侧的数据描述格式,则需要再定义一个类MyFormatter2并实现AxisValueFormatter这个接口。

    package com.example.a86156.zhuxingtu;
    
    import com.github.mikephil.charting.components.AxisBase;
    import com.github.mikephil.charting.formatter.AxisValueFormatter;
    
    import java.text.DecimalFormat;
    
    public class MyFormatter2  implements AxisValueFormatter {
        private DecimalFormat mFormat;
        public MyFormatter2() {
            //格式化数字
            mFormat = new DecimalFormat("###,###,##0.0");
        }
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return mFormat.format(value) + " %";
        }
    
        @Override
        public int getDecimalDigits() {
            return 0;
        }
    
    }
    
    
    展开全文
  • jQuery制作简单柱状图

    千次阅读 2015-01-26 15:16:24
    柱状图 - ab蓝学网 http://www.ablanxue.com ab蓝学网 http://www.ablanxue.com CSS: /*以下为柱状图样式 BY 小虾虎鱼http://www.xiaoboy.com*/ .histogram-container{position:relative;margin-left:60...

    Html:

    <head>
    <title>柱状图 - ab蓝学网 http://www.ablanxue.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="histogram.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="histogram-container" id="histogram-container"></div>
    <p class="xiaoboy"><a href="http://www.ablanxue.com" target="_blank">ab蓝学网 http://www.ablanxue.com</a></p>
    </body>

    CSS:

    /*以下为柱状图样式 BY 小虾虎鱼http://www.xiaoboy.com*/
    .histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}
    .histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}
    .histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;}
    .histogram-bg-line li{float:left;overflow:hidden;background:#fff;}
    .histogram-bg-line li div{border-right:1px #eee solid;}
    .histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;}
    .histogram-content ul{height:100%;}
    .histogram-content li{float:left;height:100%;text-align:center;position:relative;}
    .histogram-box{position:relative;display:inline-block;height:100%;width:20px;}
    .histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;}
    .histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;}
    .histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}
    .histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}
    .histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度,使百分数与线条对其*/}


    Js:

    /*http://www.xiaoboy.com 小虾虎鱼 BY 穗溪*/
    /*2012-11-08*/
    $(function(){
    var dataArr={
    	"data":[
    		{"id":1,"name":"百度","per":"10"},
    		{"id":2,"name":"腾讯","per":"20"},
    		{"id":3,"name":"新浪","per":"10"},
    		{"id":4,"name":"网易","per":"44"},
    		{"id":5,"name":"搜狐","per":"50"},
    		{"id":5,"name":"小虾虎鱼","per":"69"},
    		{"id":5,"name":"人人网","per":"72"},
    		{"id":5,"name":"爱奇艺","per":"88"},
    		{"id":5,"name":"奇虎360","per":"92"},
    		{"id":5,"name":"阿里巴巴","per":"15"},
    		{"id":5,"name":"阿里巴巴","per":"10"}
    	]
    };
    new histogram().init(dataArr.data);
    });
    
    function histogram(){
    	var controls={};
    	var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33","#ED3810");
    	this.init=function(data,y){
    		setControls();
    		buildHtml(data,y);
    	}
    	function setControls(){
    		controls.histogramContainer=$("#histogram-container");
    		controls.histogramBgLineUL=controls.histogramContainer.children("div.histogram-bg-line");
    		controls.histogramContentUL=controls.histogramContainer.children("div.histogram-content");
    		controls.histogramY=controls.histogramContainer.children("div.histogram-y");
    	}
    	function buildHtml(data,y){
    		var len=data.length,perArr=new Array(),maxNum,maxTotal,yStr='';
    		var contentStr='',bgLineStr='',bgLineAll='';
    		var widthPer=Math.floor(100/len);
    		minWidth=len*21+60;
    		controls.histogramContainer.css("min-width",minWidth+"px");
    		
    		for(var a=0;a<len;a++){
    			perArr[a]=parseInt(data[a]['per']);		
    		}
    		maxNum=String(perArr.max());
    		if(maxNum.length>2){
    			var x=parseInt(maxNum.substr(maxNum.length-2,1))+1;
    			maxTotal=Math.floor(parseInt(maxNum/100))*100+x*10;
    		}else{
    			maxTotal=Math.floor(parseInt(maxNum/10))*10+10;
    		}
    		
    		//y轴部分
    		if(y=="%"){
    			yStr+='<li>100%</li><li>80%</li><li>60%</li><li>40%</li><li>20%</li><li>0%</li>';			
    		}else{
    			var avg=maxTotal/5;
    			for(i=5;i>=0;i--){
    				yStr+='<li>'+avg*i+'</li>';
    			}
    		}
    		
    		//柱状条部分
    		for(var i=0;i<len;i++){
    			var per=Math.floor(parseInt(data[i]['per'])/maxTotal*100);
    			var n=Math.floor(parseInt(per)/10);
    			contentStr+='<li style="width:'+widthPer+'%">';
    			contentStr+='<span class="histogram-box"><a style="height:'+per+'%'+';background:'+bgColor[n]+';" title="'+data[i]['per']+'"></a></span><span class="histogram-name">'+data[i]['name']+'</span>';
    			contentStr+='</li>';
    			bgLineStr+='<li style="width:'+widthPer+'%;"><div></div></li>';
    		}
    		
    		//背景方格部分
    		for(var j=0;j<5;j++){
    			bgLineAll+='<ul>'+bgLineStr+'</ul>';
    		}
    		bgLineAll='<div class="histogram-bg-line">'+bgLineAll+'</div>';
    		contentStr='<div class="histogram-content"><ul>'+contentStr+'</ul></div>';
    		yStr='<div class="histogram-y"><ul>'+yStr+'</ul></div>';
    		controls.histogramContainer.html(bgLineAll+contentStr+yStr);
    		controls.histogramContainer.css("height",controls.histogramContainer.height()+"px");//主要是解决IE6中的问题		
    	}
    }
    Array.prototype.max = function(){//最大值
     return Math.max.apply({},this) 
    } 
    


    展开全文
  • 项目中遇到需要柱状图。 本项目原来也有相关差不多的内容,但是柱状图是服务端直接拼接HTML代码输出,一大堆麻烦 一大堆。。。(不知道公司哪个大神发明的哇)。。 网上找了个插件,改了下,效果如下了 看起来...
  • html5制作柱形图

    2015-12-18 15:22:43
    柱形图,可以制作柱形图,可以制作饼图,折线图等等多种图形
  • jpgraph制作动态柱形图

    2015-01-13 15:03:58
    利用jpgraph来制作一个简单柱形图,加深对JQ框架的理解。
  • 柱状图大家都会制作,那么你会用python制作柱状图吗?我们先来看一下柱状图的定义:柱形图,又被称为长条图、或者柱状统计图,也叫作条图、条状图、棒形图,本质上来说就是一种以长方形的长度为变量的统计图表。长条...
  • 开发中,经常会用图表直接的展示数据,如何使用BizCharts制作柱状图呢? 参考网址:https://bizcharts.net/ 简单柱状图的编码过程 引入相关组件 import React from "react"; import { G2, Chart, Geom, Axis...
  • 一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈。 预览地址:...
  • 前段时间使用HTML+CSS制作了一个柱状图,今天将Javascript版的也分享一下,没用做成插件的形式,只需要调用一个函数即可,功能比较简单,使用起来也算方便,只需要将json数据传入给该函数即可,具体使用方法看完代码...
  • vs2010 开发简单示例 包括饼图、柱形图、和折线图
  • 柱形图是数据分析中常用的图表,主要用于对比、展示趋势、描述等,柱形图虽然简单,但要将其用于不同的场合对数据的要求、布局、配色、分类间距、主要刻度线、以及变形图表的处理技巧,不是那么容易把握的。...
  • Excel-制作简单的环形柱状图

    千次阅读 2019-10-23 10:43:20
    利用圆环图,制作环形柱状图。–环形图的变形 原始数据如下, 目标图形: 步骤一: 添加辅助列 ①添加C列辅助列,目的是将B列的数值,转化为最大值为270(270度,即为3/4圆环)的相对应的值(即该部分的数值...
  • 图表制作,在Excel中有着非常广泛的应用,今天,小编带大家了解“业绩对比”柱形图制作技巧。一、效果图。 从效果图表中可以看出,每位员工“全年销售计划”和“上半年”、“下半年”的业绩形成了鲜明的对比,员工...
  • 快速绘制几种简单柱状图。1垂直柱图(普通柱图)绘制普通柱图的python代码如下:(左右滑动可以查看全部代码)12345678910111213141516171819202122232425262728# -*- coding:utf-8 -*-# 申明编码格式为utf-8...
  • 在我们使用excel表格统计数据时,可以制作各种各样的图形来统计,比如说饼图、折线图、瀑布图等等,近日很多用户比较常用三维簇状柱形图,看到它的名字就知道不简单,那么excel怎么制作三维簇状柱形图呢?其实很简单...
  • ECharts 中的饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要xAxis,yAxis。饼图的Data包含 name 和 ...
  • 完成一个简易的可交互的柱状图 排序 添加 const WIDTH = 600;// 画布宽度 const HEIGHT = 400;// 画布高度 const PADDING = 30;// 画布四周空间 // 模拟数据 let dataList = [24, 36, 15, 8, 28, 18]; /...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,151
精华内容 3,260
关键字:

如何制作简单柱形图