javascript - 如何在 dx-Chartjs 上创建多个系列

Question

我正在尝试根据类型可视化一些评分，但是我很难找到如何根据类型对系列进行分组。

图表选项如下:

$scope.chartOptions = {
            dataSource: data,
            commonSeriesSettings: {
                argumentField: "ratingDate"
            },
            series: [
                { valueField: "score", group: "Recommend", color: '#66cc33' },
                { valueField: "score", group: "Service", color: '#35a2f4' },
                { valueField: "score", group: "Product", color: '#ef4e3a' },
                { valueField: "score", group: "Experience", color: '#fea000' }
            ],
            argumentAxis: {
                grid: {
                    visible: true
                },
                argumentType: 'datetime'
            },...

系列选项没有group选项，这是我希望拥有的选项，因为我希望看到一个系列是关于一段时间内的服务得分，一个系列是关于超时的产品得分等.

目前我得到了 4 个不同颜色的重复系列。 Here is a fiddle

The documentation has no information about grouping like this所以我想知道是否有人遇到过这个问题并解决了类似的问题？

也许我可以在其中返回 truMetric == “Recommend” 的分组函数？

我的示例数据如下所示:

var data =
            [
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 1.6666666666666667, "percentageRating": 1.6666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 6.0, "percentageRating": 6.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 5.333333333333333, "percentageRating": 5.333333333333333, "totalNumberOfRatings": 12, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 0.66666666666666663, "percentageRating": 0.66666666666666663, "totalNumberOfRatings": 12, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 2.6, "percentageRating": 2.6, "totalNumberOfRatings": 20, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 3.8, "percentageRating": 3.8, "totalNumberOfRatings": 20, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 4.0, "percentageRating": 4.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 5.666666666666667, "percentageRating": 5.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 3.6666666666666665, "percentageRating": 3.6666666666666665, "totalNumberOfRatings": 12, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 9.0, "percentageRating": 9.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 4.5, "percentageRating": 4.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.333333333333333, "percentageRating": 5.333333333333333, "totalNumberOfRatings": 12, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 7.5, "percentageRating": 7.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.5, "percentageRating": 5.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 0.5, "percentageRating": 0.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.666666666666667, "percentageRating": 5.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 2.0, "percentageRating": 2.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 8.0, "percentageRating": 8.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 6.25, "percentageRating": 6.25, "totalNumberOfRatings": 16, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 0.0, "percentageRating": 0.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.25, "percentageRating": 3.25, "totalNumberOfRatings": 16, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 1.0, "percentageRating": 1.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 6.0, "percentageRating": 6.0, "totalNumberOfRatings": 16, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 2.5, "percentageRating": 2.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.5, "percentageRating": 3.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 2.0, "percentageRating": 2.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 8.0, "percentageRating": 8.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 4.666666666666667, "percentageRating": 4.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 1.0, "percentageRating": 1.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 3.3333333333333335, "percentageRating": 3.3333333333333335, "totalNumberOfRatings": 12, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 48, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 5.9, "percentageRating": 5.9, "totalNumberOfRatings": 40, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.2222222222222223, "percentageRating": 4.2222222222222223, "totalNumberOfRatings": 36, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.0, "percentageRating": 4.0, "totalNumberOfRatings": 36, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.666666666666667, "percentageRating": 4.666666666666667, "totalNumberOfRatings": 48, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.375, "percentageRating": 4.375, "totalNumberOfRatings": 32, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.2857142857142856, "percentageRating": 4.2857142857142856, "totalNumberOfRatings": 28, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 32, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 2.7777777777777777, "percentageRating": 2.7777777777777777, "totalNumberOfRatings": 36, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 3.875, "percentageRating": 3.875, "totalNumberOfRatings": 32, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 99}
            ];

Answer 1

您可以使用这个:http://phonejs.devexpress.com/Documentation/Howto/Data_Layer?version=13_2#Data_Layer_Reading_Data_Grouping

var dataSource = new DevExpress.data.DataSource(data);
dataSource.group("ratingDate","truMetric" );
dataSource.load().done(function(result) {
    var chart_data=[];
    for(var i=0;i<result.length;i++){
        var d={ratingDate:result[i].key};
        for(var j=0;j<result[i].items.length;j++){
            d[result[i].items[j].key]=result[i].items[j].items[0].score;
        }
        chart_data.push(d);
    }
$("#chartContainer").dxChart({
    dataSource:chart_data,
    // rest of your code

        series: [
            { valueField: "Recommend", name:"Recommend",  color: '#66cc33' },
            { valueField: "Service", name:"Service",  color: '#35a2f4' },
            { valueField: "Product", name:"Product", color: '#ef4e3a' },
            { valueField: "Experience", name:"Experience",  color: '#fea000' }
        ],

//rest of your code

完整 fiddle :http://jsfiddle.net/2Bq9k/1/