JqPlot - 当存在刻度时线图中的奇怪行为

时间:2014-06-19 15:34:21

标签: javascript asp.net-mvc jqplot linechart

这是我的图表,没有勾选这是我获取数据的方式:

var data = [@string.Join(",", Model.Activity.Laps.SelectMany(t => t.TrackPoints).Select(h => h.HeartRate))];

Heart Rate over distance (distance in X-Axis is not yet prepeared

现在如果我想在X轴上放置我使用的距离:

var data= [@Html.Raw(string.Join(",", Model.Activity.Laps.SelectMany(t => t.TrackPoints).Select(pair => "[" + "'" +  pair.DistanceMeters.ConvertToKm() + "'" + "," + pair.HeartRate + "]")))];

这就是结果,请检查图表的第一部分:

Wrong Start!

这就是我设置图表的方式:

        <script type="text/javascript">
        $('#btnResetHeartRateZoom').show();

        var data = [@Html.Raw(string.Join(",", Model.Activity.Laps.SelectMany(t => t.TrackPoints).Select(pair => "[" + "'" +  pair.DistanceMeters.ConvertToKm() + "'" + "," + pair.HeartRate + "]")))];

        @*var data = [@string.Join(",", Model.Activity.Laps.SelectMany(t => t.TrackPoints).Select(h => h.HeartRate))];*@
        var HeartRatePlot = $.jqplot('HeartInformation', [data],
            {
                seriesDefaults: { lineWidth: 1.0, },
                title: "@Resources.HeartRate",
                axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, //Render de los textos.
                series: [{ showMarker: false, fill: true, fillAndStroke: true, color: '#FF0808', fillColor: '#FAC5C5' }], //Para no mostrar markers.
                axes:
                {
                    xaxis: { autoscale: true, label: "@Resources.Distance", pad: 0, tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    yaxis: { autoscale: true, label: "@Resources.HeartRate [bpm]" },
                },
                highlighter: { show: true, sizeAdjust: 1.5 },
                cursor: { show: true, zoom: true }
            });

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

任何想法我做错了什么?

PS:距离以米为单位,我将刻度线转换为KM除以1000。

0 个答案:

没有答案