混合图表类型 - Angular ChartJS
Mixed chart type - Angular ChartJS
我正在尝试使用 angular 插件而不是普通 javascript 创建混合图表。为此,我正在使用这个库 http://jtblin.github.io/angular-chart.js/
在普通的 javascript 它是用类似这样的东西创建的:
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,
}
}
]
}
}
});
这里可以看到:http://plnkr.co/edit/TvY5tz?p=preview
我尝试了很多方法来用 angular-chart 做同样的事情,但我一直做不到。有没有人能够用图书馆创建任何混合图表类型?如果是这样,请分享任何示例。
提前致谢。
现在不可能,有一个未解决的问题可以跟踪此问题:https://github.com/jtblin/angular-chart.js/issues/336
现在可以使用 1.0.0-alpha8,参见 here on github
我正在尝试使用 angular 插件而不是普通 javascript 创建混合图表。为此,我正在使用这个库 http://jtblin.github.io/angular-chart.js/
在普通的 javascript 它是用类似这样的东西创建的:
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,
}
}
]
}
}
});
这里可以看到:http://plnkr.co/edit/TvY5tz?p=preview
我尝试了很多方法来用 angular-chart 做同样的事情,但我一直做不到。有没有人能够用图书馆创建任何混合图表类型?如果是这样,请分享任何示例。
提前致谢。
现在不可能,有一个未解决的问题可以跟踪此问题:https://github.com/jtblin/angular-chart.js/issues/336
现在可以使用 1.0.0-alpha8,参见 here on github