图表JS。数据集-数据集属性的单独数据集选项

时间:2019-03-11 06:53:13

标签: django chart.js django-2.1

我有一个要在线图中呈现的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]
    }, 
]

但是我需要使用borderDashborderCapStyleborderWidthbackgroundColorborderColor来设置每个数据集的样式,它们都是静态的,因此更有意义如果这些样式数据已从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,
        }
    });

0 个答案:

没有答案