Question

您好我想创建条形图像我发布的图像，我试图使用谷歌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

Answer 1

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

Answer 2

在API中 https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Methods

backgroundColor上有很多选项。

如何使用背景图像创建条形图

2 个答案: