javascript - 如何在同一图表中为不同数据绘制线和点

Question

我正在使用 Flot 图表，我想绘制一个包含线数据系列和点数据系列的图表。一排成线，一排成点。

但是，我无法做到这一点？

$.plot("#placeholder", [
                    { data: prices, label: "Prices" },
                    { data: average, label: "Average", yaxis: 2 },
                    { data: error, label: "Error", yaxis: 3 }
                ], {
                    points: [{},{},{ show: true, radius: 10, lineWidth: 4, fill: false }],
                    xaxes: [ { mode: "time" } ],
                    yaxes: [ 
                        {  }, 
                        {
                            alignTicksWithAxis: 1,
                            position: "right",
                            min: -110,
                            max: 10
                        },
                        {
                            alignTicksWithAxis: 1,
                            position: "right",
                            visible: false,
                            ticks: []
                        }
                    ],
                    legend: { position: "sw" }
                });

这里的价格和平均值是两个数据线数组，错误应该是图表中的可视化点。但我只有台词。我不能“混搭”吗？

Answer 1

您可以向数据系列对象添加点 和线 选项，like so :

var data = [{
    data: [[0, 150], [1, 200], [2, 250], [3, 120], [4, 90]],
    points: { show: false },
    lines: { show: true }
},
{
    data: [[0, 200], [1, 100], [2, 150], [3, 70], [4, 30]],
    points: { show: true },
    lines: { show: false }
}];

This JSFiddle有一个系列绘制线的示例，而另一个系列绘制点。