我有一个要在线图中呈现的json数组。
这是从api返回的json数据的示例结构。
'datasets': [
{
'label': 'Dataset 1',
'data': [11, 12, 13, 14, 15]
},
{
'label': 'Dataset 2',
'data': [21, 22, 23, 24, 25]
},
{
'label': 'Dataset 3',
'data': [31, 32, 33, 34, 35]
},
]
但是我需要使用borderDash
,borderCapStyle
,borderWidth
,backgroundColor
,borderColor
来设置每个数据集的样式,它们都是静态的,因此更有意义如果这些样式数据已从api返回的json数据中排除,则最好在前端侧进行静态声明。
datasets: [
{
label: "Dataset 1",
data: [11, 12, 13, 14, 15],
borderDash: [3,15],
borderCapStyle: "round",
borderWidth: 2,
backgroundColor: 'rgba(20, 199, 110, 0.1)',
borderColor: 'rgb(20, 199, 110)',
},
{
label: "Dataset 2",
data: [21, 22, 23, 24, 25],
borderDash: [3,15],
borderCapStyle: "round",
borderWidth: 2,
backgroundColor: 'rgba(255, 99, 132, 0.1)',
borderColor: 'rgb(255, 99, 132)',
},
{
label: "Dataset 3",
data: [31, 32, 33, 34, 35],
borderDash: [3,15],
borderCapStyle: "round",
borderWidth: 2,
backgroundColor: 'rgba(31, 151, 145, 0.1)',
borderColor: 'rgb(31, 151, 145)',
}
]
有什么办法可以将这些数组分开吗?所以我可以像这样使用返回的数据吗?
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: {{graph.data.labels}},
datasets: {{graph.data.datasets|safe}},
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#444',
usePointStyle: true,
},
},
maintainAspectRatio: false,
}
});