浮点图中的多个数据源

Question

所以我有一个从 csv 文件调用数据的图表。我基本上需要将 x 和 y 放在同一个图表中，目前在两个单独的图表中就像这样。

$.ajax({
            'url' : 'csvfile.csv',
            'method' : 'get',
            'success' : function(response){
                var response = Papa.parse(response,{
                    header: true
                });

                for(var i in response.data){
                    chartData.x.push([step * i, response.data[i]['rot_x']]);
                    chartData.y.push([step * i, response.data[i]['rot_y']]);
                    chartData.z.push([step * i, response.data[i]['rot_z']]);
                }


                var plotX = $.plot($("#x-chart"),[ {
                    data: chartData.x,
                    label: 'ROT-X'
                }],plotConfig);

                var plotY = $.plot($("#y-chart"),[ {
                    data: chartData.y,
                    label: 'ROT-Y'
                }],plotConfig);

非常感谢这里的任何帮助我有效地想要得到这种类型的解决方案，其中 x 和 y 都在同一个图表中..

var plotX = $.plot($("#x-chart"),[ {
                    data: {'chartData.x','chartData.y'},
                    label: 'ROT-X'
                }],plotConfig);

这目前不起作用，但至少你会看到问题

Answer 1

假设您正在使用 jQuery 的 flot 插件，那么 docs 可以帮助您。我相信你的问题是 plotData 数组中对象的数据属性需要是数组 - 在你的代码中你正在使用一个对象。

您可以在一个图表中使用两个数据源：

var plotData = [ 
    { 
      label: "ROT-X", 
      data: chartData.x
    },
    { 
      label: "ROT-Y", 
      data: chartData.y
    }
];

var plotX = $.plot($("#x-chart"), plotData, plotConfig);

或者合并数组，一个数据源。

var plotData = [ 
    { 
      label: "ROT-X&Y", 
      data: chartData.x.concat(chartData.y)
    }
];

var plotX = $.plot($("#x-chart"), plotData, plotConfig);

浮点图中的多个数据源

Multiple data sources in flot plot

javascript

jquery

flot