javascript 自定义顶点图

我正在尝试创建一个图形与Apexcharts看起来像下面。你可以忽略2垂直线，因为他们是不必要的。
看看apexcharts的例子，我找到的最接近的东西是堆叠条形图。也许有更好的东西，我错过了？如果是这样，请让我知道。
https://apexcharts.com/javascript-chart-demos/bar-charts/stacked/
下图的行为方式是我得到一个数据数组，如下所示：

[3, 7, 21, 55, 32, 3, 7, 58, 38] // and so on. You will notice the numbers can duplicate.

简单地说，我会用书和页数作为参考。X轴代表页数，Y轴代表书的数量。所以通过我发布的图片，你可以看到有22本书的页数在100页以下。有2本书的页数大于100页但小于300页，还有1本书的页数大于300页但小于400页。
我真实的难弄清楚如何配置堆叠条形图以这种方式显示事物。我不是在寻找如何操纵我的数据的答案，而是更多的是如何配置图形的设置以便获得正确的显示。
我已经尝试了几种配置都无济于事。任何帮助，这是最感谢！

为了给演出工作提供参考，我尝试了一些方法：

series: [{
        name: 'Range 1',
        data: [{ y: 44, x: 100 }, { y: 55, x: 100 }, { y: 41, x: 100 }, { y: 37, x: 100 }, { y: 22, x: 100 }, { y: 43, x: 100 }, { y: 21, x: 100 }]
    }, {
        name: 'Range 2',
        data: [{ y: 44, x: 200 }, { y: 55, x: 200 }, { y: 41, x: 200 }, { y: 37, x: 200 }, { y: 22, x: 200 }, { y: 43, x: 200 }, { y: 21, x: 200 }]
    }]

series: [{
        name: 'Range 1',
        data: [{ x: 44, y: 100 }, { x: 55, y: 100 }, { x: 41, y: 100 }, { x: 37, y: 100 }, { x: 22, y: 100 }, { x: 43, y: 100 }, { x: 21, y: 100 }]
    }, {
        name: 'Range 2',
        data: [{ x: 44, y: 200 }, { x: 55, y: 200 }, { x: 41, y: 200 }, { x: 37, y: 200 }, { x: 22, y: 200 }, { x: 43, y: 200 }, { x: 21, y: 200 }]
    }]
series: [{
        name: 'Range 1',
        data: [44, 55, 41, 37, 22, 43, 21]
    }, {
        name: 'Range 2',
        data: [53, 32, 33, 52, 13, 43, 32]
    }]

我发现的最大问题之一是我似乎无法控制X轴上的值或保持条形宽度相同。
下面是一个示例，说明了其中一次尝试是如何产生的。

最后，我上面展示的第一张图片是从谷歌图表的直方图中生成的。我的要求是将所有的谷歌图表移动到顶点图表，所以我试图在顶点图表中找到一些东西来完成这项工作。

你的问题中有两点我不太明白：您的数据以及为什么需要堆叠条形图。
如果你需要在你的xaxis上放页数，在你的yaxis上放书数，那么一个基本的条形图就足够了，我给你举个例子如下：

let options = {
  series: [{
    name: 'Series',
    data: [22, 2, 2, 1, 0, 0, 2, 0]
  }],
  chart: {
    type: 'bar',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: [0, 100, 200, 300, 400, 500, 600, 700],
    labels: {
      offsetX: -13
    },
    title: {
      text: 'Number of pages',
      offsetY: 100
    }
  },
  yaxis: {
    title: {
      text: 'Number of books'
    }
  },
  tooltip: {
    custom: ({series, seriesIndex, dataPointIndex, w}) => {
      return `<div class="arrow_box"><div>Book(s): <strong>${series[seriesIndex][dataPointIndex]}</strong></div><div>Pages: <strong>${w.globals.labels[dataPointIndex]}-${w.globals.labels[dataPointIndex] + 100}</strong></div>`;
    }
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

.arrow_box {
  padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

最棘手的部分是自定义工具提示。我这样做是为了把间隔而不是类别放在那里。

- 编辑1**

哎呀!我没注意：* * 我上面的例子没有响应**（见标签）。所以也许你可以这样做：
一个三个三个一个
这不是很优雅，但我没有找到更好的解决方案。

- 编辑2**

看了你的评论后，我更新了我的例子：

let options = {
  series: [{
    name: 'Sci-fi',
    data: [44, 55, 41, 37, 22, 43, 21]
  }, {
    name: 'Fantasy',
    data: [53, 32, 33, 52, 13, 43, 32]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['0-100', '101-200', '201-300', '301-400', '401-500', '501-600', '601-700'],
    title: {
      text: 'Number of pages'
    }
  },
  yaxis: {
    title: {
      text: 'Number of books'
    }
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0"></script>

<div id="chart"></div>

- 编辑3**

使用上面的类比，每个堆叠的栏都会显示书名。因为它们都是不同的书。
如果你想这样做，我认为你将不得不为每本书创建一个系列，只设置一种颜色，以避免得到一个不可读的彩虹。但如果你有很多书，你很可能会面临性能问题。
你会在下面找到一个更好的例子。它并不一致，因为我随机化了所有的序列，但它似乎更接近你想要做的。

function getAllSeries() {
  let allSeries = [];
  
  for (let i = 1; i <= 7; i++) {
    let series = {};
    
    series.name = `Book ${i}`;
    series.data = [];  
    
    for (let j = 0; j < 7; j++) {
      if ((Math.random() * 10) < 5) {
        series.data.push(1);
      } else {
        series.data.push(null);
      }
    }
    
    allSeries.push(series);
  }
  
  return allSeries;
}

let options = {
  series: getAllSeries(),
  chart: {
    type: 'bar',
    height: 350,
    stacked: true
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['0-100', '101-200', '201-300', '301-400', '401-500', '501-600', '601-700'],
    title: {
      text: 'Number of pages'
    }
  },
  yaxis: {
    title: {
      text: 'Number of books'
    }
  },
  legend: {
    show: false
  },
  colors: ['#269ffb'],
  stroke: {
    colors: ['#ffffff'],
    width: 1    
  },
  tooltip: {
    custom: ({series, seriesIndex, dataPointIndex, w}) => {
      return `<div class="arrow_box"><div>Name: <strong>${w.config.series[seriesIndex].name}</strong></div><div>Pages: <strong>${w.globals.labels[dataPointIndex]}</strong></div>`;
    }
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

.arrow_box {
  padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0"></script>

<div id="chart"></div>

javascript 自定义顶点图

1条答案

相关问题

热门标签

最新问答