Question

我正在尝试从webApi的json响应创建一个线图。我想创建一个如下所示的时间点数据集：

var adddata = {     
    datasets: [{
                label: "a",
                backgroundColor: "rgba(255,0,0,0.5)",               
                fill: false,
                data: [{
                    x: newDateString(0),
                    y: 22
                }, {
                    x: newDateString(2),
                    y: 25
                }, {
                    x: newDateString(4),
                    y: 12
                }, {
                    x: newDateString(5),
                    y: 22
                }],
            }, {
                label: "b",
                backgroundColor: "rgba(0,255,0,0.5)",                   
                fill: false,
                data: [{
                    x: newDate(0),
                    y: 34
                }, {
                    x: newDate(1),
                    y: 22
                }, {
                    x: newDate(4),
                    y: 2
                }, {
                    x: newDate(5),
                    y: 13
                }]
            }]
    };

现在如果我有一个看起来像的json：

{"Values":{"2018-01-17 09:24:34":"0","2018-01-17 09:24:31":"0","2018-01-17 09:24:33":"0","2018-01-17 09:24:35":"0"}}

是否可以创建定义各个点的数据集？

Answer 1

您可以解析JSON字符串并将生成的json对象转换为数据集，如下所示：

<div class="icons_div">
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
</div>

所以这就是结果：https://jsfiddle.net/beaver71/mfvc9p9x/

从json创建chart.js点数据集

1 个答案: