【问题标题】:Need to join x axis and y axis label highcharts需要加入x轴和y轴标签highcharts
【发布时间】:2019-03-01 06:27:47
【问题描述】:

我正在尝试加入面积样条图的 x 轴和 y 轴的节点。这是我的fiddle,我还需要在左下角移动标题和副标题,并且需要集成下拉菜单。基本上我需要这样的图表

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Total Visitors',
        x: 0,
    },
    subtitle: {
      text: 'This is all users that visited your site',
        x: 0,
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        },
        series: {
          marker: {
            enabled: false
          },
          lineWidth: 2,
          states: {
            hover: {
              enabled: false
            }
          }
        }
    },
    series: [{
      lineColor: '#8b8bff',
            color: '#c5c6ff',
            showInLegend: false,
            lineWidth: '4px',
        name: 'John',
        data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
    }]
})

请帮助 谢谢!!!

【问题讨论】:

    标签: javascript reactjs highcharts react-highcharts


    【解决方案1】:

    要在同一位置设置坐标轴刻度,请将tickmarkPlacement 设置为on,并设置minmax

    要将标题和副标题移动到左角,请使用align 属性:

    title: {
        ...,
        align: 'left'
    },
    subtitle: {
        ...,
        align: 'left'
    },
    xAxis: {
        tickmarkPlacement: 'on',
        min: 0.5,
        max: 10.5,
        ...
    }
    

    现场演示:https://jsfiddle.net/BlackLabel/w7p6rL8o/

    API 参考:https://api.highcharts.com/highcharts/title.align

    【讨论】:

    • 谢谢,我也可以添加下拉菜单吗?
    • 嗨@Profer,我认为最好将下拉菜单创建为 HTML 元素。
    • 你的意思是单独的html div 放在地图的最前面吗?
    • @Profer,是的,我认为这将是最简单的实现。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-05
    • 2014-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多