英文:
show few datas(ticks) more than than max in y axis in apex chart
问题
在上图中，我将1设置为最大值，我需要更多的刻度（最多达到5），如何显示比最大值更多的刻度。
在图表中，最大值为1（已绘制）。我希望y轴上的标签（在左侧）显示更多（最多达到5）。
如果图表中的最大值为30，我想在y轴上添加更多刻度。
英文:
In the above graph I have 1 as the max value and I need some more ticks(upto say 5) how do I show more ticks than the max value.
In the graph the max value is 1(plotted). and i want the label in y axis(on the left side) to display some more(upto 5)
if the max values in the graph is 30 I want to add few more ticks in y axis.
答案1
得分: 0
可以使用options.yaxis.max属性来动态设置值。
const { createApp, ref, computed, watch, onMounted } = Vue
const app = createApp({
setup() {
/** 获取示例数组 **/
const getRandomData = (length = 12) => Array.from(
{ length: length },
() => Math.floor(Math.random() * length * 3)
)
const data = ref(getRandomData())
const maxDataValue = computed(() => data.length === 0 ? 0 : Math.max(...data.value)) // 查找最高值
/** 渲染图表 **/
const renderChart = () => {
/** 使用额外选项渲染图表 **/
document.querySelector("#chart").innerHTML = ""
const options = {
chart: {
type: 'line',
},
series: [{
name: '示例数值',
data: data.value,
}],
yaxis: {
max: maxDataValue.value + 5, // 将Y轴的结束值设置为最高值+5
tickAmount: 5,
},
}
const chart = new ApexCharts(document.querySelector("#chart"), options)
chart.render()
/** 渲染不带额外选项的原始图表 **/
// 只需渲染原始图表以进行比较
document.querySelector("#originalChart").innerHTML = ""
const originalOptions = {
chart: {
type: 'line',
},
series: [{
name: '示例数值',
data: data.value,
}],
}
const originalChart = new ApexCharts(document.querySelector("#originalChart"), originalOptions)
originalChart.render()
}
// 当数据更改时重新渲染图表
watch(data, renderChart)
// 挂载时渲染图表
onMounted(() => {
renderChart()
})
return { data, getRandomData }
}
}).mount('#app')
#chart, #originalChart {
padding: 5px 0;
width: 300px;
}
button {
margin: 5px;
}
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<div id="app">
<button @click="data = []">清空数据</button>
<button @click="data = getRandomData(1)">随机数据 [1]</button>
<button @click="data = getRandomData()">随机数据 [12]</button>
<h2>带有额外Y轴刻度</h2>
<div id="chart"></div>
<h2>原始</h2>
<div id="originalChart"></div>
</div>
英文:
Can use options.yaxis.max property with dynamically value.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { createApp, ref, computed, watch, onMounted } = Vue
const app = createApp({
setup() {
/** Get Example Array **/
const getRandomData = (length = 12) => Array.from(
{ length: length },
() => Math.floor(Math.random() * length * 3)
)
const data = ref(getRandomData())
const maxDataValue = computed(() => data.length === 0 ? 0 : Math.max(...data.value)) // find highest value
/** Render Chart **/
const renderChart = () => {
/** RENDER CHART WITH EXTRA OPTIONS **/
document.querySelector("#chart").innerHTML = ""
const options = {
chart: {
type: 'line',
},
series: [{
name: 'Example Value',
data: data.value,
}],
yaxis: {
max: maxDataValue.value + 5, // set end of Y axis to highest value + 5
tickAmount: 5,
},
}
const chart = new ApexCharts(document.querySelector("#chart"), options)
chart.render()
/** RENDER ORIGINAL CHART WITHOUT EXTRA OPTIONS **/
// just render original chart to compare
document.querySelector("#originalChart").innerHTML = ""
const originalOptions = {
chart: {
type: 'line',
},
series: [{
name: 'Example Value',
data: data.value,
}],
}
const originalChart = new ApexCharts(document.querySelector("#originalChart"), originalOptions)
originalChart.render()
}
// Re-Render Chart when Data Changed
watch(data, renderChart)
// Render Chart when Mounted
onMounted(() => {
renderChart()
})
return { data, getRandomData }
}
}).mount('#app')
<!-- language: lang-css -->
#chart, #originalChart {
padding: 5px 0;
width: 300px;
}
button {
margin: 5px;
}
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<div id="app">
<button @click="data = []">empty data</button>
<button @click="data = getRandomData(1)">random data [1]</button>
<button @click="data = getRandomData()">random data [12]</button>
<h2>With extra ticks on yaxis</h2>
<div id="chart"></div>
<h2>Original</h2>
<div id="originalChart"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论