【发布时间】：2018-02-15 05:11:48
【问题描述】：
我正在使用 canvas.js java 脚本库来可视化我的数据。这里我使用 rangeSplineArea 图表来区分低绩效和高绩效数据。
我需要什么
现在，当我单击每个节点时，我需要一个用于该特定数据的另一个图表（向下钻取图表）。
我查看了 canvas.js 文档，但无法理解该文档。
我尝试过的
$(document).ready(function() {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Commonality Of Emotions",
fontFamily: "DIN-Light",
fontColor: "white",
},
backgroundColor: "rgba(255,255,255,0.0)",
responsive:true,
axisY: {
includeZero: false,
labelFontColor: "white",
maximum: 40,
gridThickness: 0
},
axisX: {
labelFontColor: "white",
},
toolTip: {
shared: true,
content: "{name} </br> <strong>Emotion: </strong> </br> L: {y[0]} , H: {y[1]} "
},
data: [{
type: "rangeSplineArea",
fillOpacity: 0.2,
color: "#ff1000",
indexLabelFormatter: formatter,
indexLabelFontColor: "white",
dataPoints: [
{ label: "hostility", y: [15, 26], name: "hostility", color: "white" },
{ label: "anger", y: [15, 27], name: "anger" },
{ label: "disliking", y: [13, 27], name: "disliking" },
{ label: "egoism", y: [14, 27], name: "egoism" },
{ label: "dominance", y: [15, 26], name: "dominance" },
{ label: "unhappiness", y: [17, 26], name: "unhappiness" },
{ label: "loneliness", y: [16, 27], name: "loneliness" }
]
}]
});
chart.render();
var images = [];
addImages(chart);
function addImages(chart) {
for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
var dpsName = chart.data[0].dataPoints[i].name;
if (dpsName == "hostility") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/67155-200.png"));
} else if (dpsName == "anger") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/024-business-cliparts.png"));
} else if (dpsName == "disliking") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-7-new.png"));
}
else if (dpsName == "egoism") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-8.png"));
}
else if (dpsName == "dominance") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/neutral-d007-512.png"));
}
else if (dpsName == "unhappiness") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/882181-200.png"));
}
else if (dpsName == "loneliness") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/734983-200.png"));
}
images[i].attr("class", dpsName).appendTo($("#chartContainer>.canvasjs-chart-container"));
positionImage(images[i], i);
}
}
function positionImage(image, index) {
var imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[index].x);
var imageTop = chart.axisY[0].convertValueToPixel(chart.axisY[0].maximum);
image.width("40px")
.css({
"left": imageCenter - 20 + "px",
"position": "absolute", "top": imageTop + "px",
"position": "absolute"
});
}
function formatter(e) {
if (e.index === 0 && e.dataPoint.x === 0) {
return "LowPerformer " + e.dataPoint.y[e.index];
} else if (e.index == 1 && e.dataPoint.x === 0) {
return " HighPerformer " + e.dataPoint.y[e.index];
} else {
return e.dataPoint.y[e.index];
}
}
});
【问题讨论】：
标签： javascript jquery charts canvasjs