带有 x 轴作为字符串的 Javascript FLOT 组合条形图和折线图

标签 javascript flot

我有一个条形图,其中 x 轴是一个字符串,所以我需要使用一个刻度数组,我还需要能够指定每个条形的颜色并在同一个图中绘制一条线。

以下是我现在拥有的代码,经过多次修改以尝试使其正常工作,但我现在被卡住了。

我根本无法显示图表,它在 jsfiddle 上:http://jsfiddle.net/9x7aJ/4102/

任何帮助将不胜感激,因为我今天大部分时间都在尝试解决这个问题。

var fdat = [
 {
   "color": "#6ECFF6",
   "data": [[0,114]]
 },
 {
   "color": "#7BCDC8",
   "data": [[1,96]]
 },
 {
   "color": "#FDC68A",
   "data": [[2,94]]
 }
]

var data = [
    {label: "d1", data:fdat, bars: {show: true}},
    {label: "d2",data:fdat, lines: {show: true}, points:{show:true}}
];

var opts = {xaxis: {ticks:[[0,"Text 1"], [1,"Text 2"], [2,"Text 3"]]}};
$.plot($("#placeholder"),data,opts);

最佳答案

您不能为每个数据点设置一个具有不同颜色的对象,数据点必须是简单的数组。如果您将数据简化为

var fdat = [
    [0, 114],
    [1, 96],
    [2, 94]
]

图表有效(更新 fiddle )。
如果每个条形需要不同的颜色,请为每个条形创建一个数据系列。

关于带有 x 轴作为字符串的 Javascript FLOT 组合条形图和折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29315038/

相关文章:

javascript - 使用 reactJs 和 NodeJs 发出 http post 请求

javascript - $.when().done() 没有按预期工作

javascript - Node.js 和 MongoDB 代码澄清

javascript - 将鼠标悬停在 flot 中的某个点上时显示自定义工具提示

jquery - 根据 x 轴值设置 flot 中工具提示的标签

javascript - jQuery - 图表只显示 1 个图表

javascript - Flot 问题中的时间图?

javascript - 无法读取 null 的属性 'focus'

javascript - 横幅刷新代码

javascript - 如何在 JQuery Flot 中制作可点击的线?