0

我需要使用来自后端服务的 json 响应创建一个漂亮的直方图。

我研究了一些免费提供的图表 api，但我发现没有一个可以选择创建直方图。

在我开始使用 jquery/css 从头开始​​创建直方图这一大胆而费力的任务之前，我想在这里检查一下是否有人已经知道我的问题的解决方案。

顺便说一句，我熟悉谷歌的图表api 并使用过它。但是，那也没有直方图选项。

我的服务响应 json 示例如下所示：

{
   "hist_values":[
      {
         "start_value":"0",
         "end_value":"0.1",
         "count":624202
      },
      {
         "start_value":"0.1",
         "end_value":"0.2",
         "count":80706
      },
      {
         "start_value":"0.2",
         "end_value":"0.3",
         "count":48601
      },
      {
         "start_value":"0.3",
         "end_value":"0.4",
         "count":14064
      },
      {
         "start_value":"0.4",
         "end_value":"0.5",
         "count":1619
      },
      {
         "start_value":"0.5",
         "end_value":"0.6",
         "count":1255
      }
   ]
}

stackoverflow.com 上还有其他一些类似的问题/答案，因为没有一个能令人满意地回答我的问题，所以我发布了一个新问题。

4

1 回答 1

1

在快速谷歌之后，我在 jsfiddle 上找到了一个直方图的例子。

不确定最初是谁编写的，但通过一些调整，您可以更改代码以处理您的数据，或者您可以重新格式化您的数据以更接近示例数据集。

它适用于 jQuery 和 Highcharts 库（可在 Creative Commons Attribution-NonCommercial 3.0 License - http://shop.highsoft.com/highcharts.html下免费用于个人/非营利组织）

var chart = new Highcharts.Chart({
chart: {
        renderTo:'container',
        defaultSeriesType:'column',
        borderWidth:0,
        backgroundColor:'#eee',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#fff',
        plotBorderWidth:1,
        plotBorderColor:'#ccc'
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:'Histogram Test'},
    legend:{
        //enabled:false
    },
    tooltip:{
        borderWidth:1,
        formatter:function() {
            return '<b>Range:</b><br/> '+ this.x +'<br/>'+
            '<b>Count:</b> '+ this.y;
        }
    },
    plotOptions:{
        column:{
            shadow:false,
            borderWidth:.5,
            borderColor:'#666',
            pointPadding:0,
            groupPadding:0,
            color: 'rgba(204,204,204,.85)'
        },
        spline:{
            shadow:false,
            marker:{
                radius:1
            }
        },
        areaspline:{
            color:'rgb(69, 114, 167)',
            fillColor:'rgba(69, 114, 167,.25)',
            shadow:false,
            marker:{
                radius:1
            }
        }
    },
    xAxis:{
        categories: ['> 48.00 =< 51.81','> 51.81 =< 54.63','> 54.63 =< 57.44','> 57.44 =< 60.25','> 60.25 =< 63.06','> 63.06 =< 65.88','> 65.88 =< 68.69','> 68.69 =< 71.50','> 71.50 =< 74.31','> 74.31 =< 77.13','> 77.13 =< 79.94','> 79.94 =< 82.75','> 82.75 =< 85.56','> 85.56 =< 88.38','> 88.38 =< 91.19','> 91.19 =< 94.00'],
        labels:{
            rotation:-90,
            y:40,
            style: {
                fontSize:'8px',
                fontWeight:'normal',
                color:'#333'
            },
        },
        lineWidth:0,
        lineColor:'#999',
        tickLength:70,
        tickColor:'#ccc',
    },
    yAxis:{
        title:{text:''},
        //maxPadding:0,
        gridLineColor:'#e9e9e9',
        tickWidth:1,
        tickLength:3,
        tickColor:'#ccc',
        lineColor:'#ccc',
        tickInterval:25,
        //endOnTick:false,
    },
    series: [{
        name:'Bins',
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
    },{
        name:'Curve',
        type:'spline',
        visible:false,
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
        //color: 'rgba(204,204,255,.85)'
    },{
        name:'Filled Curve',
        type:'areaspline',
        visible:false,
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
        //color: 'rgba(204,204,255,.85)'
    }]
});

http://jsfiddle.net/jlbriggs/9LGVA/

于 2013-05-22T14:07:34.503 回答