Custom Legend for Column Chart, with pointColorMapping and only a single serie with Color parameter
Hello,
How do I insert the legend for this type of chart (a single serie with 4 colors...) ?
I think I have to use "Custom Legend" but don't know how!
I try...
<div class="mr-2 mt-2">
<ejs-chart id="GraficoDiario" title="@Model.TituloGrafico">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis title="horas" valueType="Category" labelIntersectAction="Rotate45" interval=4>
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="@ViewBag.unidade" labelFormat="n3"></e-chart-primaryyaxis>
<e-chart-legendsettings visible="true" toggleVisibility="false" position="Bottom" maximumTitleWidth="300" title="Super Vazio"></e-chart-legendsettings>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-zoomsettings enableMouseWheelZooming="true" enablePinchZooming="true" enableSelectionZooming="true"></e-chart-zoomsettings>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name=" " xName='x' yName='yValue' width=2 pointColorMapping="Color" type="Column">
<e-series-marker>
<e-series-datalabel visible="false" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
|
@{
string valueX = "45%";
}
<ejs-chart>
<e-chart-margin bottom="30"></e-chart-margin>
<e-chart-annotations>
<e-chart-annotation content="#templateWrap" region="Chart" x=valueX y="98%"></e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
<script id="templateWrap" type="text/x-template">
<div style="width:80px; padding: 5px;">
//….
</div>
</script> |
|
document.getElementById('button').onclick = () => {
//…
for (var i = 0; i < annotationEle.length; i++) {
var foreign = document.createElementNS(
"foreignObject"
);
//…
var svg = document.querySelector("#container_svg");
svg.appendChild(foreign);
}
img.onload = function () {
ctx.drawImage(img, 0, 0);
var imagedata = canvas.toDataURL("image/jpeg");
imagedata = imagedata.replace("data:image/jpeg;base64,", '');
var image = new ejs.pdfexport.PdfBitmap(imagedata);
var document = new ejs.pdfexport.PdfDocument();
document.pageSettings.orientation = ejs.pdfexport.PdfPageOrientation.Landscape;
// specify the size
document.pageSettings.size = new ejs.pdfexport.SizeF(1200, 600);
//Add a page.
var page1 = document.pages.add();
page1.graphics.drawImage(image, 0, 0);
//Save the document.
document.save("Chart.pdf");
document.destroy();
canvas.remove();
};
};
</script> |
