百分比栏的javascript图表库

Question

我使用Google图表以图形格式表示我的数据。但是我要求以下面的格式显示其中一个图形。技术上它与饼图相似但是直线。

你们知道我可以用来获取这种格式的任何javascript库吗？

由于

Answer 1

您的典型条形图与您想要的不同，但是使用数据和图表选项可以达到非常相似的效果：

  google.setOnLoadCallback(drawChart);
  function drawChart() {

      //your data in kbytes
      var data = {Free: 226480000, Audio: 6300, Movies: 48100, Photos: 1300000, Apps: 9120000, Backups: 0, Other: 13190000 }


      var sorted_data=[]; // seems you want it sorted by lowest to highest
      var total=0; // total space

      for(var key in data){
          total+=data[key];
          if(key != 'Free'){
              sorted_data.push([key + ' '+  bytesToSize(data[key]), {v:data[key], f:bytesToSize(data[key]) }]) // add the label we will use and the size for the bar
          }
      }

      sorted_data.sort(function(a,b){return a[1]-b[1]}) // sort by size, lowest to highest

      sorted_data.push(['Free' + bytesToSize(data.Free), data.Free]) // add free space to the end of the array

      var chart_data=[['Machine'], ['']];



      for(var i=0;i<sorted_data.length;i++){
          chart_data[0].push(sorted_data[i][0]); // add the label
          chart_data[1].push(sorted_data[i][1]); // add the value
      }


      var title = 'Macintosh HD        ' + bytesToSize(data.Free) + ' free out of ' + bytesToSize(total); // create title (if you want to have one part on the right and the other on left, add it with html and put title='')


    chart_data = google.visualization.arrayToDataTable(chart_data);



      var options = {
      title: title,
        isStacked: true,
        legend:{position:'bottom'}, // put legends on bottom
        hAxis: {gridlines:{color:'transparent'}, ticks:[]}, // remove gridlines and ticks
        height: 200, // little height, we don't need much
        series:{}

    };
      var cols=chart_data.getNumberOfColumns()-2;
      options.series[cols]={color:'transparent', visibleInLegend: false} // put free space as transparent

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    chart.draw(chart_data, options);
  }

function bytesToSize(kbytes) { //function that translates kbytes to the fortmat you wanted
   var bytes=kbytes*1000;
   if(bytes == 0) return '0 Byte';
   var k = 1000;
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   var i = Math.floor(Math.log(bytes) / Math.log(k));
   return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

工作小提琴：http://jsfiddle.net/byneqLhm/1/

Answer 2

管理解决方案http://jsfiddle.net/vivekbhusal/3n78tc8p/ @juvian给出的解决方案也非常好

          google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['subscribers', 'administrators', 'Authors','Publishers'],
          [120,  2, 0, 5],
        ]);

        var options = {
            isStacked: true,
      title: '',
      vAxis: {
            textPosition : 'none',
        title: '',
        gridlines : {
          count : 1,
          color: 'white'
        }
      },
      hAxis: {
        title: '',
        format : '#%',
       'gridlines':{
            'color':'transparent',
            },
            'baselineColor':'transparent',
            'textStyle':{
            'fontSize':'11',
            }
        },
      colors: ['#be1e2d', '#74b749', '#0daed3', '#ffb400', '#f63131'],
      legend : {
        position: 'bottom'
      }
    };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));


            var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
            total += dt.getValue(row, i);
        }
        var percent = val / total;
        // what you do here depends on how you want to display the data in the tooltips

        // option 1: use the value of the data point:
        return {v: percent, f: dt.getFormattedValue(row, 1)};


        // option 2: use the percent:
        return {v: percent, f: (percent * 100).toFixed(2) + '%'};
    }
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function (dt, row) {
        var val = dt.getValue(row, 2);
        for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
            total += dt.getValue(row, i);
        }
        var percent = val / total;

        return {v: percent, f: dt.getFormattedValue(row, 2)};

        return {v: percent, f: (percent * 100).toFixed(2) + '%'};
    }
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function (dt, row) {
        var val = dt.getValue(row, 3);
        for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
            total += dt.getValue(row, i);
        }
        var percent = val / total;

        return {v: percent, f: dt.getFormattedValue(row, 3)};

        return {v: percent, f: (percent * 100).toFixed(2) + '%'};
    }
}]);
        chart.draw(view, options);
      }