2014-09-03 5 views
0

Привет, я хочу создать гистограмму, как изображение, которое я опубликовал, я пытался сделать это с помощью google api и d3.js, но не смог достичь. Мне нужен светлый фон для бара после окончания бара до высоты исправления для каждого бара. Пожалуйста, скажите мне, какой API я должен использовать.Как создать гистограмму с фоновыми изображениями

enter image description here

Я использовал Google API

<html> 
    <head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Ingredients', 'Quantity', { role: 'style' }, { role: 'annotation' }], 
     ['28g', 28, 'red', 'Fat'], 
     ['14g', 14,'red','Saturates'], 
     ['9g', 9,'red','Sugar'], 
     ['2.2g', 2.2,'red','Salt'] 
    ]); 

    var options = { 
      'legend': 'none', 
      'title': 'per Product', 
      'titleTextStyle': {color: '#FF0000'}, 
      'hAxis': {title: 'in grams', titleTextStyle: {color: 'red'}}, 
      tooltip: {trigger: 'none'}, 
      enableInteractivity: 'False' 
    }; 

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

    chart.draw(data, options); 

    } 

</script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html> 

с помощью этого я получил ниже enter image description here

ответ

1

Чтобы достичь этого, вы можете просто нарисовать другой прямоугольник перед тем, который вы используете для отображения фактических данных, с шириной в каждом баре и высотой как максимальное значение шкалы

Смежные вопросы