我可以使用什么样的图表来使用 ChartJS（或类似的）来实现这一点？答案

【问题标题】：What kind of graph could I use to achieve this with ChartJS (or similar)?我可以使用什么样的图表来使用 ChartJS（或类似的）来实现这一点？
【发布时间】：2020-04-02 09:27:50
【问题描述】：

我正在尝试在 javascript 中制作这样的分贝频率图表：

[X轴是频域（红蓝黄是4G频段），Y轴是功率dB]

但是，我在每个库中找到的经典条形图无法将条形的底部固定在 0 以下。我正在尝试找到另一种可以用来实现此目的的图表。橙色是本底噪声功率。

提前谢谢你。

【问题讨论】：

到目前为止，您在 ChartJs 中尝试过什么？
@JohnGo-Soco 我尝试更改条形图表的一些参数，但条形底部从 0 开始，这是主要问题。这是一个简单的尝试：jsfiddle.net/now4Lcr1/2

标签： javascript chart.js

【解决方案1】：

无法仅通过one 值创建“范围”。

例如，您示例中红色条的数据不仅是 20 -或- -180 而是 -180 to 20 = nested array ( Multidimensional Array)

data = [[-180,20]];

sn-p:

labels1 = ["a","b","c","d"];
data = [[20,-180],[40,-160],[20,-120]];

var data = {
  labels: labels1,
  datasets: [
    {
      label: "hello",
      data: data,
      backgroundColor: ["yellow", "blue", "orange"],
      borderWidth: 5
    } 
  ]
}

var options = {
  responsive: true,
  scales: {
    xAxes: [{ 
      stacked: false,
    }],
    yAxes: [{ 
      stacked: false,
      ticks: {
        gridLines: {
          drawOnChartArea: true
        },
        max: 100,
        min: -180,
      }
    }]
  },
  title: {
    display: true,
    text: name
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
};


/*for(let i = 0; i<10; i++)
{
	let labels2 = [];
	let datos2 = [];
	labels2.push(i);
	datos2.push(-120);
}*/



var ctx = document.getElementById("myChart");

var chartInstance = new Chart(ctx, {
  type: 'bar',
  data: data,
  options:options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<h2>
Hello World!
</h2>
<canvas  id='myChart'/>

【讨论】：