javascript - 当x轴和y轴的数据为文本值时,如何在highcharts中设置点?

标签 javascript jquery ruby-on-rails charts highcharts

我有这样的数据 x 轴 = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月' ,“十二月”]y轴=["1-12岁","13-20岁","21-30岁"]

现在,我想用 y 轴指向 x 轴,但我不确定应该在 Highchart 的数据字段中输入哪种数据格式。

我已尝试使用此输入数据[1,2,3,4,5],但它在图表上显示错误的点。这是我尝试过的数据图

enter image description here

这是我编写的代码:

Highcharts.chart("c5312209", {
  chart: {
    type: 'line'
  },
  title: {
    text: "Z test"
  },
  tooltip:{
    enabled: false
  },
  yAxis: {
    allowDecimals: false,
    labels: {
      formatter: function(){
        var d = {"1":"Aged Under 10 Years Old","2":"Aged 11-15 Years Old","3":"Aged 16-17 Years Old","13":"Aged Over 101 Years Old"};
        return d[this.value];
      }
    },
    title: {
      text: ''
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    title: {
      text: 'Time'
    }
  },
  series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}]
});

请帮我解决这个问题。 预先感谢您。

最佳答案

如果您每个月有一个积分,则按照您所做的那样提供数据 series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}]是一个不错的选择。

如果您只想设置某些月份的点,您可以明确指定 x 值,如下所示:

series: [{data: [{x:0, y: 0}, {x: 1, y: 0}, {x: 2, y: 13}...]}]

在您的配置中,格式化程序存在问题(与标签相比,y 刻度被放置在错误的值处),这是一个工作示例: https://jsfiddle.net/ewolden/me9pyzqv/14

<小时/>

从评论中,要从图例中隐藏系列,或删除系列名称,可以执行以下操作:

您可以这样做:series: [{name: '', ...}]这会将名称设置为空。或series: [{showInLegend: false,...}]这将从图例中删除该系列。

关于javascript - 当x轴和y轴的数据为文本值时,如何在highcharts中设置点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49168651/

相关文章:

javascript - Jquery 悬停选择不起作用

javascript - 在测验结束时显示用户答案

javascript - 如何使用 jQuery(或需要时的纯 JavaScript)将 <use> 添加到内联 SVG?

ruby-on-rails - 如何正确扩展 Devise Recoverable?

ruby-on-rails - Ruby on Rails - 使用需要此记录的嵌套关联保存新记录

javascript - 无法在 'postMessage' GoogleTagManager 上执行 'Window'

javascript - jQuery 为图像标签创建了不正确的元素

jquery - 选择子项时如何突出显示父项?

javascript - 没有空格时断词

ruby-on-rails - 如何部署无法使用 Capistrano 进行版本控制的许可字体?