Question

我有一个包含以下代码的flot图表：

var options = {
        lines: {
            show: true
        },
        points: {
            show: true
        },
        xaxis: {
            tickSize: 1,
            mode: "categories"
        }
    };

    var data = [];
    data.push(
        {"label": "Agrobiodiversity for consumption",
    "data": [["January", 3.0], ["February", 3.9], ["March", 2.0], ["April", 1.2], ["May", 1.3], ["June", 2.5],
             ["July", 2.0], ["August", 3.1], ["September", 2.9], ["October", 0.9],["November", 0.5],["December", 1.8]]});

    $.plot($("#flot-dashboard-chart"), data, options);

但我得到了：

我尝试在轴选项中添加类别，但似乎没有任何效果。

知道我还需要添加什么或者我需要纠正什么？

Answer 1

你可以使用我的高图表，你可以删除不必要的东西。

Demo with jsFiddle

    var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    labels: {
      formatter: function() {
        var link_array = ["first", "second", "third", "fourth"];
        i = 0;
        if (this.value == 'Sugammadex and related compounds')
          return '<a href="#' + link_array[0] + '">' + this.value + '</a>';

        if (this.value == 'Cyclodextrin enabled diclofenac injection (generic Dyloject)')
          return '<a href="#' + link_array[1] + '">' + this.value + '</a>';

        if (this.value == 'Cyclodextrins in biological products')
          return '<a href="#' + link_array[2] + '">' + this.value + '</a>';

        if (this.value == 'Cyclodextrins as a new class of antibiotics')
          return '<a href="#' + link_array[3] + '">' + this.value + '</a>';
      },
      useHTML: true
    },
    categories: ['Sugammadex and related compounds',
      'Cyclodextrin enabled diclofenac injection (generic Dyloject)', 'Cyclodextrins in biological products',
      'Cyclodextrins as a new class of antibiotics'
    ],

    title: {
      text: null
    }
  },
  yAxis: {
    labels: {
      formatter: function() {
        var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];

        return x_text[this.value];
      }
    },

    title: {
      text: '',
      align: 'high'
    },

    tickInterval: 1
  },
  tooltip: {
    formatter: function() {
      var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];
      return x_text[this.y];
    }
  },

  plotOptions: {

    bar: {
      dataLabels: {
        enabled: false
      }
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    showInLegend: false,
    data: [1, 2, 3, 4]
  }]
});

$(document).ready(function() {
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });
});

Answer 2

“类别”模式是一个需要在HTML中加载的插件

绘制包含无效工作类别的折线图

2 个答案: