Javascript 我如何在不使用第三方工具的情况下复制这个谷歌图表？

我不知道如何使自动调整柱形图栏根据其他列的值上下缩放。例如，如果我有5列，其中5列中的4列的值为0，最后一列的值为1，那么该条将是“max value”，并且非常高。但是，如果我让另一个条从0值变为2值，那么1值条的大小将是2值条的一半。谷歌图表为我做了所有这些，我喜欢，但这是我唯一喜欢谷歌图表的地方

我如何在不使用任何第三方API的情况下制作一个类似于下面的图表

google.charts.load（“当前”{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“法力消耗”，“牌”]，
["0", 1],
["1", 0],
["2", 9],
["3", 1],
["4", 8],
["5", 3],
["6", 3],
["7+", 1],
]);
var-maxV=0；
对于（var i=0；imaxV）{
maxV=data.getValue（i，1）；
}
}
maxV+=maxV/5；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”，
}, ]);
变量选项={
标题：“卡牌/法力消耗”，
宽度：'750'，
高度：'375'，
背景色：“000”，
EnableInteractive:false，
酒吧：{
组宽度：“95%”，
},
图例：{
位置：“无”
},
注释：{
高对比度：假，
总是这样：是的，
茎：{
颜色：“透明”
},
文本样式：{
fontName:“Lato”，
字体大小：18.75，
auraColor:'透明'，
颜色：“FFF”
}
},
图表区：{
宽度：“95%”，
背景颜色：“000”
},
言辞：{
基线颜色：“#FFF”，
视图窗口：{
马克斯：马克斯，
},
网格线：{
颜色：“透明”
},
text位置：“无”
},
titleTextStyle：{
颜色：“FFF”，
fontName:“拉托”，
尺寸：25
},
哈克斯：{
文本样式：{
颜色：“FFF”，
fontName:“拉托”，
字体大小：18.75，
}
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}

在我看来，你应该首先设法弄清楚你的网站出了什么问题。API的存在是为了避免每次都重新发明轮子，从我在你的问题中读到的内容来看，一旦你要添加一个新特性，可能会出现类似的问题。无论如何，要使用绘图和图形执行操作，您确实需要JavaScript，而不仅仅是HTML+CSS，据我所知

尽管我也不完全同意重新发明轮子，但为特定需要创建一个非常简单的API可能是一个有趣的练习。你能展示一下到目前为止你做了什么吗？

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