如何解决动态添加数据到 chartJs 响应问题
我尝试在chartjs条形图中显示一些数据。但是当我动态获取数据时(很多)chartjs 无法响应操作。我该如何解决?
我的代码如下:
//html canvas :
<div id="ProductChartsDiv" height="300" style="width:100%; height:300px; ">
<canvas id="ProductkChart"></canvas>
</div>
//js chart display code:
function displayChartData(chartData,dataType,chartCanvasName,chartCanvasDivName)
{
$(chartCanvasName).remove();
chartCanvasName = chartCanvasName.split('#').join('');
$(chartCanvasDivName).append('<canvas id="' + chartCanvasName + '" ></canvas>');
ctx = document.getElementById(chartCanvasName);
var mylabels = [];
var valuesdatas = [];
var mybackgroundColors = [];
var myborderColors = [];
ctx.height = 400;
var myLineChart = new Chart(ctx,{ options: { responsive: true,maintainAspectRatio: false} });
// myLineChart.clear();
myLineChart.destroy();
var randRgbaColor = random_rgba();
for (var data in chartData)
{
if (dataType == "elementB") {
mybackgroundColors.push("#3e95cd");
myborderColors.push("#3e95cd");
mylabels.push(chartData[data].ProductionElementB);
valuesdatas.push(chartData[data].productionPointB);
}
else if (dataType == "elementA")
{
mybackgroundColors.push("#3e95cd");
myborderColors.push("#3e95cd");
mylabels.push(chartData[data].ProductionElementA);
valuesdatas.push(chartData[data].productionPointA);
}
}
myLineChart = new Chart(ctx,{
type: 'bar',data: {
labels: mylabels,datasets: [
{
label: dataType+ " Production",data: valuesdatas,backgroundColor: mybackgroundColors,borderColor: myborderColors,hoverBackgroundColor: "rgba(255,99,132,0.4)",hoverBorderColor: "rgba(255,1)",borderWidth: 1
}
]
},options: {
responsive: true,maintainAspectRatio: false,scales:
{
yAxes: [
{
ticks: {
steps: 2,max: 200,min:0
}
}
]
},title: {
display: true,text: ' '
}
}
});
myLineChart.update();
}
//sample call function :
displayChartData(data.prodcutionList,"elementA","#ProductkChart","#ProductChartsDiv");
有些标签无法显示,图表变小取决于数据大小。一个小数据,一切看起来都不错,但更多的数据开始变小,图表大小无法响应。如何能够做出响应?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。