【发布时间】：2020-12-28 18:39:18
【问题描述】：
我试图弄清楚如何获取 3 个硬编码变量 [index, fieldName, aggType] 并将数据从 json 文件动态传递给它们，然后将该变量传递给我创建的 (inData) 函数，然后最后将它们传递到我创建的图表中。我不确定如何引用数据并将其放入变量中。我把我的代码放在下面。请让我知道是否可以澄清这一点，这有点令人困惑。索引名称是 ES 索引，字段名称是要聚合的字段，而 aggType 是聚合的类型，如计数、总和等......这个问题有一个建议的答案，使用 forEach 选项，但是，这不是一个好适合我的情况，因为有必要在某些查询中传递多行，或者在其他查询中传递单行。 forEach 选项将迫使我们以单独的方式处理每个选项。我们希望能够作为一个整体传递查询。谢谢你的帮助。我想出的分析器如下。
mainchart.js
$('#chartType').change(function(index, val) {
buildChart($(this).val())
})
function line() {
let labels = []
let data = []
let index = 'issflightplan';
let fieldName = 'VehicleType';
let aggtype = 'count';
$.getJSON("http://localhost:3000/data/issflightplan/VehicleType/count/", function (inData) {
aggregationName = index + "|" + fieldName + "|" + aggtype
for (keyNo in inData.aggregations[aggregationName].buckets) {
labels.push(inData.aggregations[aggregationName].buckets[keyNo].key)
data.push(inData.aggregations[aggregationName].buckets[keyNo].doc_count)
}
// });
console.log(data)
var ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(450, 0, 0, 0);
gradient.addColorStop(0, 'rgb(0,99,132)');
gradient.addColorStop(1, 'rgb(255,99,132)')
var gradient2 = ctx.createLinearGradient(0, 0, 0, 450);
gradient2.addColorStop(0, 'rgb(0,50,600)');
gradient2.addColorStop(1, 'rgb(150,0,100)')
function drillDownChart(click, mydata) {
if (mydata[0]) {
var x = mydata[0]['_index'];
window.location.href = 'https://chart-js.com/'
}
};
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'My New Line Chart',
data: data,
backgroundColor: gradient,
borderColor: 'blue',
borderWidth: 1,
borderDash: [10, 5, 10, 2],
borderDashOffset: 10,
borderCapStyle: 'round',
borderJoinStyle: 'bevel',
cubicInterpolationMode: '',
fill: true,
lineTension: 0.2,
pointBackgroundColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderWidth: 3,
pointRadius: 2,
pointStyle: 'circle',
pointHitRadius: 20,
pointHoverBackgroundColor: 'purple',
pointHoverBorderColor: 'pink',
pointHoverBorderWidth: 5,
pointHoverRadius: 10,
showLine: true,
spanGaps: true,
steppedLine: false
}, {
label: ['My New Line Chart 2'],
data: data.datapoints2,
// backgroundColor: gradient2,
borderColor: gradient2,
fill: false
}]
},
// Configuration options go here
options: {
onClick: drillDownChart,
// onClick: updateChart,
legendCallback: function (line) {
var text = [];
text.push('<ul class="legendClass">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li class = style = "background: ' + chart.data.datasets[i].backgroundColor + ' ">');
text.push(chart.data.datasets.label[i]);
text.push('</li>')
}
text.push('</ul>');
return text.join("");
},
ticks: {
autoSkip: true
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
fontSize: 16,
responsive: true,
},
plugins: {
title: {
display: true,
// text: obj.title,
position: "top",
fontSize: 16,
fontFamily: "New Times Roman",
fontColor: 'blue',
fontStyle: 'bold',
padding: 10,
lineHeight: 1.2,
},
legend: {
display: true,
//need to be able to pass the options into you from the data
position: "bottom",
align: 'center',
fullWidth: true,
// onClick: alertBox,
// onHover: changeFontColor,
labels: {
boxWidth: 20,
fontSize: 10,
fontStyle: 'bold',
fontColor: 'black',
fontFamily: 'Times New Roman',
padding: 10,
usePointStyle: 'circle',
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
value: '18B',
borderColor: 'red',
borderWidth: 2
}],
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
position: 'nearest',
backgroundColor: 'rgb(0, 0, 132)',
titleFontFamily: 'New Times Roman',
titleFontSize: 16,
titleFontStyle: 'normal',
titleFontColor: '#yellow',
titleSpacing: 10,
titleMarginbottom: 15,
bodyFontFamily: 'New Times roman',
bodyFontSize: 15,
bodyFontStyle: 'normal',
bodyFontColor: 'rgb(0,15,132)',
bodySpacing: 3,
xPadding: 10,
yPadding: 10,
caretPadding: 5,
cornerRadius: 20,
// multiKeyBackground: '()',
displayColors: true,
callbacks: {
title: function (tooltipItems, data) {
// Pick first xLabel for now
var title = chartType;
var labels = data.labels;
var labelCount = labels ? labels.length : 0;
if (tooltipItems.length > 0) {
var item = tooltipItems[0];
if (item.xLabel) {
title = labels[item.index];
} else if (labelCount > 0 && item.index < labelCount) {
title = labels[item.index];
}
}
return title;
},
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
onClick: function (event, arry) {
getcurrentfilter(event, arry)
}
}
}
}
}
}
}
});
console.log(data)
})
}
我的数据.json
{
"hits": [...],
"aggregations": {
"issflightplan|VehicleType|count":{
"meta": {...},
"buckets": [
{
"key": "Progress",
"doc_count":77
},
"issflightplan|CrewSize|count": {
"meta": {...},
"buckets": [
{
"key": "",
"doc_count": 32
},
【问题讨论】：
-
您发布了您的代码，这很好，但是有很多东西需要解压，而且您的问题还不是很清楚。你能把
line()函数减少到不工作的部分吗？ -
好的，我现在就做，请稍等。
-
@Will 我取出了无关紧要的代码，而 line() 函数就在那里建立我希望能够传递数据的位置。因此，主要组件是 line() 函数顶部的变量和 .getJson 语句。正如您在函数 (inData) 中看到的那样，我正在传递数据并设置变量aggregationName。我正在放置 JSON 文件的一个小 sn-p 以显示设置的原因。然后你可以看到我已经推送了标签和数据，然后我将它们放入 line() 图表函数中。我将特定代码放在那里的唯一原因。
-
我想我错过了问题所在。您从服务器获取数据。您设置了两个数组：
labels和data。您遍历从服务器返回的对象并填充您的数组。然后将labels和data数组传递给 Chart 选项以创建表。似乎一切都很好。 -
@我会调整这个。请让我知道这是否有帮助。如有必要，我可以进一步调整它，使其更易于理解和解包。希望增加 json 设置有助于理解函数设置
标签： javascript chart.js