1

有人可以帮我创建一个类似于谷歌播放中显示的评级直方图的评级直方图吗？

在此处输入图像描述

尝试使用滑块，但正在寻找更好的选项来显示直方图。下面是我的代码

<div class="ui-grid-b">

<div class="ui-block-a">5 Stars</div>
<div class="ui-block-b"><input type="range" name="slider-mini" id="slider-mini" value="76322" min="0" max="84392" data-highlight="true" data-mini="true" /></div>
<div class="ui-block-c">76322</div>

<div class="ui-block-a">4 Stars</div>
<div class="ui-block-b"><input type="range" name="slider-mini" id="slider-mini" value="84392" min="0" max="84392" data-highlight="true" data-mini="true" /></div>
<div class="ui-block-c">84392</div>

<div class="ui-block-a">3 Stars</div>
<div class="ui-block-b"><input type="range" name="slider-mini" id="slider-mini" value="6322" min="0" max="84392" data-highlight="true" data-mini="true" /></div>
<div class="ui-block-c">6322</div>

<div class="ui-block-a">2 Stars</div>
<div class="ui-block-b"><input type="range" name="slider-mini" id="slider-mini" value="25120" min="0" max="84392" data-highlight="true" data-mini="true" /></div>
<div class="ui-block-c">25120</div>

<div class="ui-block-a">1 Star</div>
<div class="ui-block-b"><input type="range" name="slider-mini" id="slider-mini" value="1532" min="0" max="84392" data-highlight="true" data-mini="true" /></div>
<div class="ui-block-c">1532</div>

</div>

希望得到一些替代解决方案，帮助我以比滑块控件更好的方式显示直方图

提前致谢

4

2 回答 2

2

我建立了一个类似的模型。实际的颜色值只是位于块元素内的 1-100% 的百分比。这里没有使用 jQuery。

例子：

.bar-five {
  width: 75%;
  background-color: #9FC05A;
}

.bar-four {
  width: 40%;
  background-color: #ADD633;
}

演示

于 2013-07-25T14:27:35.967 回答
0

要绘制星星，您可以使用 raty.js https://github.com/wbotelhos/raty

使用 highcharts 直方图。http://www.highcharts.com/

这是我的做法：

function ratingsChart (id) {
$('#rateMe').attr('robotId', id);
$('#rateMe').raty( {click: function(score, evt) {
    alert('RobotId: ' + $(this).attr('robotId') + "\nscore: " + score);
}, score: 0, hints: [ _('', 1),_('', 2),_('', 3),_('', 4),_('', 5)] } );
yaShareRobot(id);
getRobotRating(id);

$('#ratingsChart').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: ''
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    tooltip: {
        enabled: false
    },
    xAxis: {
        categories: ['5 ', '4', '3', '2', '1'],
        gridLineWidth: 0,
        tickLength: 0,
        lineWidth: 0,
        title: {
            text: null
        },
        labels: {
            useHTML: true,
            formatter: function() {
                return '<div style="position: relative"><img style="position: absolute; right:0" src="/images/ratyImages/star-on.png"><span style="font-size: 12px">' + this.value + '&nbsp;&nbsp;&nbsp;&nbsp;</span></div>';
            }
        }

    },
    yAxis: {
        min: 0,
        gridLineWidth: 0,
        title: {
            text: null
        },
        labels: {
            enabled: false
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: getRobotRatingsForChart(id),
        dataLabels: {
            enabled: true
        },
        pointWidth: 24
    }]
});

}

于 2013-11-20T11:37:56.140 回答