我該如何在jQuery Mobile中創建評分直方圖，就像google中的評分欄一樣

有人可以幫我創建一個評分直方圖，類似於google play中顯示的評分直方圖嗎？我該如何在jQuery Mobile中創建評分直方圖，就像google中的評分欄一樣

enter image description here

使用滑塊嘗試，但在尋找出一個更好的選擇，以顯示直方圖。下面是我的代碼

<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>

希望能得到一些可供選擇的解決方案，可以幫助我在那麼一個更好的辦法滑塊控件提前

來源

2013-07-25 Prals

讓我們看看你做的工作，你遇到的問題導致您無法繼續，我們將很樂意幫助 – taylorc93

剛剛更新了我的文章...希望得到一些幫助 – Prals

任何人都可以提供一些洞察到這個......即使是一個小頭通過將幫助 – Prals

顯示直方圖

感謝我有類似的實體模型。實際的顏色值只是佔據一個塊元素的百分比1-100％。這裏沒有使用jQuery。

例子：

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

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

來源

2013-07-25 14:27:35

我不知道我該怎麼應用這個CSS類。我想避免使用滑塊，而是想要一些其他的選擇。你有什麼建議？ – Prals

謝謝bphillips201，我創建了一個div並設置了它的樣式。有效。 – Prals

要繪製星星，你可以使用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-20 11:37:56

我該如何在jQuery Mobile中創建評分直方圖，就像google中的評分欄一樣

回答

相關問題