te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - ApexCharts.js: How to set fixed value for axis label in Line Chart - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - ApexCharts.js: How to set fixed value for axis label in Line Chart - Stack Overflow

    javascript - ApexCharts.js: How to set fixed value for axis label in Line Chart - Stack Overflow

    programmeradmin3浏览0评论

    I'm currently using ApexChart to display a Line Chart.

    Question:
    I was wondering if there is a way to set fixed axis label values.

    My research effort

    For example:
    Let's say I want a Line Chart that displays some count per hour in a 24 hour period with ticks at the [00:00, 06:00, 12:00, 18:00] hour mark on the x-axis(this part is what I want).

    So our graph will have 24 data points [00:00, 01:00, ..., 23:00]. One for every hour.
    In the x-axis we have the time(hh:mm).
    In the y-axis we have the count.

    If I just simply insert the dataset, I get the graph shown below.
    As you can see, ApexCharts automatically sets the x-axis tick values.

    This sadly isn't what I want... also setting tickAmount doesn't get me my desired result as ApexChart just equally divides the range(in this case 0-23) by tickAmount to get its ticks. Sadly, there are no way to divide the axis to get my desired result.

    I also thought I can set the x-axis type to be category and only show every nth label but that option doesn't seem to exist either.

    The following is the option I'm passing to apexcharts

    const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour.
  },
  xaxis: {
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

    Update 1: I tried with the following changes, but to no avail I just got 24 xaxis labels...

    • changing xaxis type to category
    • adding categories
    • changing tickAmount
    • changing data type([number, number][], { x: number, y: number}[], number[])
    const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    // data as...
    // type [number, number][], first number is date, second number is count.
    // type { x: number, y: number }[], x is date, y is count.
    // type number[], number is count.
    // 24 data points, one for every hour
    // I tried all data formats and nothing changed
    data, 
  },
  xaxis: {
    type: 'category',
    categories, // ['00:00', '01:00', '02:00', ..., '23:00'],
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

    I'm currently using ApexChart to display a Line Chart.

    Question:
    I was wondering if there is a way to set fixed axis label values.

    My research effort

    For example:
    Let's say I want a Line Chart that displays some count per hour in a 24 hour period with ticks at the [00:00, 06:00, 12:00, 18:00] hour mark on the x-axis(this part is what I want).

    So our graph will have 24 data points [00:00, 01:00, ..., 23:00]. One for every hour.
    In the x-axis we have the time(hh:mm).
    In the y-axis we have the count.

    If I just simply insert the dataset, I get the graph shown below.
    As you can see, ApexCharts automatically sets the x-axis tick values.

    This sadly isn't what I want... also setting tickAmount doesn't get me my desired result as ApexChart just equally divides the range(in this case 0-23) by tickAmount to get its ticks. Sadly, there are no way to divide the axis to get my desired result.

    I also thought I can set the x-axis type to be category and only show every nth label but that option doesn't seem to exist either.

    The following is the option I'm passing to apexcharts

    const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour.
  },
  xaxis: {
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

    Update 1: I tried with the following changes, but to no avail I just got 24 xaxis labels...

    • changing xaxis type to category
    • adding categories
    • changing tickAmount
    • changing data type([number, number][], { x: number, y: number}[], number[])
    const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    // data as...
    // type [number, number][], first number is date, second number is count.
    // type { x: number, y: number }[], x is date, y is count.
    // type number[], number is count.
    // 24 data points, one for every hour
    // I tried all data formats and nothing changed
    data, 
  },
  xaxis: {
    type: 'category',
    categories, // ['00:00', '01:00', '02:00', ..., '23:00'],
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}
    • javascript
    • charts
    • apexcharts
    Share Improve this question edited Apr 28, 2022 at 19:50 General Grievance 5,02338 gold badges37 silver badges56 bronze badges asked Sep 9, 2020 at 17:56 Dave NishidaDave Nishida 871 gold badge1 silver badge9 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 6

    If you know what the x-axis labels should be, you can include them as an array in the categories property:

    var options = {
  series: [{
    data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    tickAmount: 10  // optional tickAmount value
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
    <script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart"></div>

    Even if the labels aren't always 00:00 - 23:00, you could do your hour calculations from your data, push them to array, and assign that to the categories property.

    For example:

    let timestamps = [1599675360368, 1599678960368, 1599682560368]; // using only 3 timestamps for this, but in your data you may have up to 24
let hours = timestamps.map(i => new Date(i).getHours().toString() + ":00"); // this would bee your categories array
console.log(hours);

    if the xaxis has timeseries data, of type datetime, you can try the following:

    xaxis: {
    type: 'datetime',
    min: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // start date
    max: new Date(new Date().setHours(24, 0, 0, 0)).getTime(), // end date
    tickAmount: 4, // interval you want
    labels: {
        show: true,
        formatter: function(val, timestamp) {
            return moment(new Date(timestamp)).format("HH:mm"); // formats to hours:minutes
        }        
    }
}


    var options = {
  series: [{
    data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 0, 65, 70, 75, 80, 85, 90, 95, 100, 105, 90, 30, 120]
  }],
  chart: {
    height: 200,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    tickAmount: 6
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
    <script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart"></div>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论