Javascript 如何创建带有背景图像的条形图_Javascript_D3.js_Google Visualization

Javascript 如何创建带有背景图像的条形图

javascript d3.js google-visualization

Javascript 如何创建带有背景图像的条形图,javascript,d3.js,google-visualization,Javascript,D3.js,Google Visualization,大家好，我想创建我发布的类似条形图的图像，我曾试图使用谷歌api和d3.js来实现这一点，但无法实现。我需要一个酒吧后酒吧结束一个固定的高度为每个酒吧轻背景。请告诉我我应该使用哪种API 我用过谷歌api <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascri

大家好，我想创建我发布的类似条形图的图像，我曾试图使用谷歌api和d3.js来实现这一点，但无法实现。我需要一个酒吧后酒吧结束一个固定的高度为每个酒吧轻背景。请告诉我我应该使用哪种API

我用过谷歌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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Components'，'Quantity'，{role:'style'}，{role:'annotation'}]，
[28g'，28'，红色'，脂肪']，
[14g'，14，'red'，'Saturates']，
[9g'，9，'red'，'Sugar']，
['2.2g'，2.2，'red'，'Salt']
]);
变量选项={
“图例”：“无”，
“标题”：“每种产品”，
'titleTextStyle'：{color:'#FF0000'}，
'hAxis'：{title:'in grams'，titleTextStyle:{color:'red'}}，
工具提示：{trigger:'none'}，
enableInteractivity:“False”
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

用这个我得到了下面在API中

背景色有很多选项。

要实现这一点，您可以在用于显示实际数据的矩形之前绘制另一个矩形，宽度为每个条形，高度为比例的最大值