Question

我不确定如何制作自动调整柱形图条，它会根据其他列的值向上和向下缩放。例如，如果我有5列，其中5列中的4列的值为0，而最后一列的值为1，则该栏将为＆＃34;最大值＆＃34;真的很高但是，如果我使另一个条形从0值变为2值，则1值条形将是2值条形图的一半。谷歌图表为我做了所有这些，我喜欢，但这是我唯一喜欢的谷歌图表。

如何在不使用任何第三方API的情况下制作类似下图的图表？

https://jsfiddle.net/14eoL93k/

    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 0],
      ["2", 9],
      ["3", 1],
      ["4", 8],
      ["5", 3],
      ["6", 3],
      ["7+", 1],
    ]);

    var maxV = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      if (data.getValue(i, 1) > maxV) {
        maxV = data.getValue(i, 1);
      }
    }
    maxV += maxV / 5;

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);

    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#000",
      enableInteractivity: false,
      bar: {
        groupWidth: "95%",
      },
      legend: {
        position: "none"
      },
      annotations: {
        highContrast: false,
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          auraColor: 'transparent',
          color: "#FFF"
        }
      },
      chartArea: {
        width: '95%',
        backgroundColor: "#000"
      },
      vAxis: {
        baselineColor: '#FFF',
        viewWindow: {
          max: maxV,
        },
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      titleTextStyle: {
        color: "#FFF",
        fontName: "Lato",
        fontSize: 25
      },
      hAxis: {
        textStyle: {
          color: "#FFF",
          fontName: "Lato",
          fontSize: 18.75,
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Answer 1

在我看来，您应首先尝试弄清楚您网站的问题。存在API以避免每次都重新发明轮子，并且 - 从我在你的问题中读到的 - 一旦你要添加新功能，可能会有类似的问题。无论如何，要使用drawables和graph执行操作，你需要JavaScript，而不仅仅是HTML + CSS，据我所知

如何在不使用第三方工具的情况下复制此Google图表？

1 个答案: