javascript - JqPlot - LINE 和 FILL 的不同颜色如何？

Question

我一直在努力实现这样的目标:

Check charts line and fill colors

这正是我所需要的。你知道如何让线条和填充颜色不同吗？

谢谢

这就是我的脚本:

        <script type="text/javascript">
        $('#btnResetHeartRateZoom').show();
        var data = [@string.Join(",", Model.Activity.Laps.SelectMany(t => t.TrackPoints).Select(h => h.HeartRate))];
        var HeartRatePlot = $.jqplot('HeartInformation', [data],
            {
                seriesColors: ['#85802b'],
                title: "@Resources.HeartRate",
                axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, //Render de los textos.
                series: [{ showMarker: false, fill: true, color: '#FCB1B8' }], //Para no mostrar markers.
                axes:
                {
                    xaxis: { autoscale: true, label: "@Resources.Distance", pad: 0 },
                    yaxis: { autoscale: true, label: "@Resources.HeartRate [bpm]" },
                },
                highlighter: { show: true, sizeAdjust: 7.5 },
                cursor: { show: true, zoom: true }
            });

        $('#btnResetHeartRateZoom').click(function () { HeartRatePlot.resetZoom(); });
    </script>

这是我的结果:

Answer 1

对于个人Series , 你可以启用 fillAndStroke绘制填充和线条:

If true will stroke the line (with color this.color) as well as fill under it. Applies only when fill is true.

与 fillColor指定第二种颜色:

CSS color spec to use for fill under line. Defaults to line color.

示例:http://jsfiddle.net/rjDgh/

series: [
  { ..., fill: true, fillAndStroke: true, color: '#FCB1B8', fillColor: '#ccc' }
]