javascript中的条形图答案

【问题标题】：Bar chart in javascriptjavascript中的条形图
【发布时间】：2017-04-16 18:51:01
【问题描述】：

以下代码是我尝试使用 javascript 和 html 5 画布创建条形图：

var canvas = $("#chart");
var ctx = canvas.getContext("2d");
ctx.strokeFill = "green";
var margin = 5;
var bWidth = (canvas.width - (margin * results.length)) / results.length;
var max = results.sort()[results.length - 1];
var yScale = canvas.height / max;
for (result of results)
{
    ctx.strokeRect();
}

我试图可视化的数据如下所示：

[{"choice": "Yes", votes: 2}, {"choice": "No", votes: 1}, {"choice":"maybe", votes: 3}]

问题是：

如何计算每个元素的 x 轴和 y 轴？
如何打印栏下的选项？
最多可以有 20 个选项，每个选项最多 200 个字符。怎么处理？

【问题讨论】：

标签： javascript html charts html5-canvas

【解决方案1】：

经过进一步研究，以下是解决方案：

var results = extractResults($("#results"));
var canvas = $("#chart");
var ctx = canvas.getContext("2d");
var margin = canvas.width * 0.005;
var bWidth = (canvas.width - (margin * results.length)) / results.length;
var max = Math.max.apply( Math, results );
var yScale = canvas.height / max;
var currX = margin;
ctx.font = "20px Arial"
for (i = 0; i < results.length; i++)
{
    var bHeight = yScale * results[i];
    ctx.fillStyle = "green";
    ctx.fillRect(currX, canvas.height - bHeight, bWidth, bHeight);
    ctx.fillStyle = "black";
    ctx.fillText(i + 1, currX + bWidth / 2, canvas.height - canvas.height * 0.05, bWidth / 2);
    currX += bWidth + margin;
}

【讨论】：