Javascript FLOT组合条形图;以x轴为字符串的折线图

Javascript FLOT Combined Bar & Line Chart with x-axis as string

本文关键字：字符串 折线图 FLOT 组合 条形图 Javascript      更新时间：2023-09-26

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

以下是我现在的代码，它经过了多次修改，试图使其发挥作用，但我现在被卡住了。

我根本无法用它来显示图形，它在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）
如果每个条形图需要不同的颜色，请为每个条形图创建一个数据系列。

相关文章：