Flot 折线图弄乱了 x 轴和 y 轴的数据

Question

我正在用Flot制作折线图，但是我无法让x轴和y轴正常显示数据，它们粘在一起了。我怎样才能让它覆盖整个图表。我没有在任何文档中找到如何解决这个问题。

这需要在图表的左侧：[0.24, "0.24 USD"], [2085.95, "2085.95 USD"]

这在图表的底部 [0, "0"], [1, "Jan"], [275, "Aug"], [549, "Mar"], [823, "Oct"], [1097 , "Jun"], [1371, "Dec"], [1372, "Dec"]

这是一张图片现在的样子，所有图片都分组在左下角

这就是它需要的样子，这是来自 Flot 网站的图片

这是一个代码：

var data1 = [{chart_data_money}];

var dataset = [{
    data: data1,
    color: '#ffa500',
    label: 'Loss in USD',
    points: { symbol: "circle", fillColor: "#FF000;", show: true}
}];

var options = {
    series: {
      lines: { show: true },
      points: { 
        radius: 1,
        fill: true,
        show: true 
      }
    },
    xaxes: [{ 
        position: "bottom",
        ticks: '{chart_xticks_money}',
        color: "black",
        axisLabel: "Sin(x)",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }],
    yaxes: [{
        position: "left",
        color: "red", // lines colors for y axes
        ticks: '{chart_yticks_money}',
        axisLabel: "Sin(y)",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }],
    legend: {
      noColumns: 0,
      labelFormatter: function (label, series) {
          return "<font color=\"white\">" + label + "</font>";
    },      
      // legend postion and color      
      backgroundColor: "#000",
      backgroundOpacity: 0.9,
      labelBoxBorderColor: "orange",
      position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 3,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, // 2 colors gradient for bg of chart
        axisMargin: 20
    }
};


$(document).ready(function () {
  $.plot($("#graph-line"), dataset, options);
});

Answer 1

问题是你给 Flot 你的轴刻度作为字符串而不是数组：

ticks: '{chart_xticks_money}',

需要

ticks: {chart_xticks_money},

另一个轴也一样。

这个 fiddle has the same error as your image, and this is the correct version 没有 '。

Flot 折线图弄乱了 x 轴和 y 轴的数据

Flot line graph messing up data for x-axes and y-axes

flot