为条形图定制 Chart new.js 的问题答案

【问题标题】：issue with customisation of Chart new.js for bar chart为条形图定制 Chart new.js 的问题
【发布时间】：2015-04-17 07:57:33
【问题描述】：

您好，我正在使用 Chartnew.js 绘制条形图。我已经定义了 x 和 y 轴标签并在其中绘制了条形图。

1)我怎样才能固定这个图表中每个条的宽度（宽度应该等于 20 像素）

2)这个图表可以处理的最大柱数是多少？

3) 如果条形图的数量增加，我可以使条形图可滚动吗？

4）另外，如果它可以滚动，在我的页面显示中，我可以将我的图表区域滚动到特定的条形偏移量（比如它应该根据某个索引显示为居中或突出显示）吗？ 5）我也尝试使用chart.js，但无法解决。

任何帮助将不胜感激

谢谢

【问题讨论】：

标签： javascript bar-chart chart.js scrollable chartnew.js

【解决方案1】：

我在 ChartNew.js 中添加以下代码修复了这个问题

while (barWidth > 80) {
  config.barValueSpacing = config.barValueSpacing + 10;
  barWidth = (valueHop - Math.ceil(ctx.chartLineScale * config.scaleGridLineWidth) * 2 - (Math.ceil(ctx.chartSpaceScale * config.barValueSpacing) * 2) - (Math.ceil(ctx.chartSpaceScale * config.barDatasetSpacing) * nrOfBars - 1) - ((Math.ceil(ctx.chartLineScale * config.barStrokeWidth) / 2) * nrOfBars - 1)) / nrOfBars;
}

在上面的代码中，80 是您要设置的最大尺寸。将此代码准确地放在第 3883 行，下一行：

barWidth = (valueHop - Math.ceil(ctx.chartLineScale * config.scaleGridLineWidth) * 2 - (Math.ceil(ctx.chartSpaceScale * config.barValueSpacing) * 2) - (Math.ceil(ctx.chartSpaceScale * config.barDatasetSpacing) * nrOfBars - 1) - ((Math.ceil(ctx.chartLineScale * config.barStrokeWidth) / 2) * nrOfBars - 1)) / nrOfBars;

如需更多参考，请将此代码放入函数中： var Bar = function(data, config, ctx) {}，在设置 barWidth 的行下方。

它对我来说是工作王牌。

【讨论】：