Question

我是jQuery的新手，所以不确定如何动态指定图表值。请在下面查看静态值，我想在运行时设置它们。（我需要从数据库中为“标签”和“系列”设置值）。

var lineArea2 = new Chartist.Line('#line-area2', {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    series: [
        [5, 30, 25, 55, 45, 65, 60, 105, 80, 110, 120, 150],
        [80, 95, 87, 155, 140, 147, 130, 180, 160, 175, 165, 200]
    ]
}, {
        showArea: true,
        fullWidth: true,
        lineSmooth: Chartist.Interpolation.none(),
        axisX: {
            showGrid: false,
        },
        axisY: {
            low: 0,
            scaleMinSpace: 50,
        }
    },
    [
        ['screen and (max-width: 640px) and (min-width: 381px)', {
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 2 === 0 ? value : null;
                }
            }
        }],
        ['screen and (max-width: 380px)', {
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 3 === 0 ? value : null;
                }
            }
        }]
    ]);

Answer 1

我从不使用chartist.js，但是我找到了文档，据我了解，您实际上可以使用Chartist.Base update（）更新数据

https://gionkunz.github.io/chartist-js/api-documentation.html#chartistbase-function-update

希望它可以在某种程度上帮助您。祝你有美好的一天。

Answer 2

您可以使用下面的 javascript 代码在图表上放置动态数据。

var seriesVals = [];
var labelsVals = [];
for(var i = 0; i < response.data.length; i++)
{
seriesVals.push(response.data[i].Points);
labelsVals.push(response.data[i].Team);
}

var chart = new Chartist.Pie('.ct-chart', {
                      series: seriesVals,
                      labels: labelsVals
                    }, {
                      donut: true,
                      showLabel: true
                    });

如何动态地向图表添加数据

2 个答案: