1
Ich versuche ein gemischtes Diagramm mit dem eckigen Plugin anstelle von einfachem Javascript zu erstellen. Dafür ich diese Bibliothek bin mit http://jtblin.github.io/angular-chart.js/Gemischter Diagrammtyp - Angular ChartJS
Im Klar JavaScript ist es mit etwas Ähnliches wie diese erstellt:
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
},
{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show: true,
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show:true,
}
}
]
}
}
});
Es hier zu sehen ist: http://plnkr.co/edit/TvY5tz?p=preview
ich Unmengen an Möglichkeiten versucht haben, mache dasselbe mit dem eckigen Diagramm, aber ich habe es nicht geschafft. Ist es irgendjemandem gelungen, einen gemischten Diagrammtyp mit der Bibliothek zu erstellen? Wenn ja, teilen Sie bitte irgendein Beispiel mit.
Vielen Dank im Voraus.