我想在 Highcharts 柱形图上按类别调整列,以便更正空值。下面的函数是由 Grzegorz 编写的,它就是这样做的。但是当我尝试在 React 官方包装器中添加函数时,它返回未定义的“元素”。我如何使它适应 React 官方包装器。请记住,我只想忽略空值的间隙,而不是零。这是我的代码的代码和框,逻辑应该在 Chart.js 组件中。 Chart is in ./components/Chart.js
var justifyColumns = function (chart) {
var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
distanceBetweenColumns = 0,
each = Highcharts.each,
sum, categories = chart.xAxis[0].categories,
number;
for (var i = 0; i < categories.length; i++) {
sum = 0;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i]) {
sum++;
}
});
}
});
distanceBetweenColumns = categoriesWidth / (sum + 1);
number = 1;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i]) {
ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
number++;
}
});
}
});
}
};
最佳答案
您提供的函数不适用于 null
值,您也可以在没有反应包装器的情况下注意到这一点:http://jsfiddle.net/BlackLabel/2q18zkcj/
您需要更改函数的工作方式:
function justifyColumns(chart) {
var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
distanceBetweenColumns = 0,
each = Highcharts.each,
sum, categories = chart.xAxis[0].categories,
number;
for (var i = 0; i < categories.length; i++) {
sum = 0;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i] && ob.y !== null) {
sum++;
}
});
}
});
distanceBetweenColumns = categoriesWidth / (sum + 1);
number = 1;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i] && ob.y !== null) {
ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
number++;
}
});
}
});
}
};
关于javascript - 从 React 中的 JSON 文件的空值中删除 Highcharts 柱形图中的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53697672/