Question

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

这需要位于图表外的左侧：[0.24，＆＃34; 0.24 USD＆＃34;]，[2085.95，＆＃34; 2085.95 USD＆＃34;]

这是在图表的底部 [0，＆＃34; 0＆＃34;]，[1，＆＃34; Jan＆＃34;]，[275，＆＃34; Aug＆＃34;]，[549，＆＃34; Mar＆＃34; ]，[823，＆＃34; 10月＆＃34;]，[1097，＆＃34; Jun＆＃34;]，[1371，＆＃34; 12月＆＃34;]，[1372，＆＃34; 12月＆＃ 34]

以下是现在看起来的图像，所有图像都在左下角分组

这就是它需要的样子，这是来自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

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

ticks: '{chart_xticks_money}',

需要

ticks: {chart_xticks_money},

和另一个轴相同。

此fiddle与您的图片有相同的错误，这是没有'的{{3}}。

绘制线图，弄乱x轴和y轴的数据

1 个答案: