如何将X值设置为字符串

问题描述 投票:0回答:1

我有此代码:

        data: {
            x : 'x',
            columns: [
                ['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],
                ['Ilość wejść', 0, 0, 0, 0, 0, 0, 1]
            ],

看起来:

“单击以检查图像”

问题在这里:

 ['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],

如何使此值可以作为字符串而不是日期格式接受?

javascript c3.js
1个回答
0
投票

我想你的目标是得到这样的东西:

enter image description here

我从未使用过该库,但是我在他们的网站上进行了一些研究并编码以下内容:

var chart2 = c3.generate({
    bindto: '#chart2',
    data: {
      columns: [
      ['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],
        ['Ilość wejść', 0, 0, 0, 0, 0, 0, 1]
      ],
      axes: {
        data2: 'y2'
      },
      types: {
        'Ilość wejść': 'bar'
      }
    },
    axis: {
      y: {
        label: {
          text: 'Y Label',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true,
        label: {
          text: 'Y2 Label',
          position: 'outer-middle'
        }
      }
    }
});

C3网站:https://c3js.org/gettingstarted.html#generate

我想推荐chart.js,我认为它更易于使用,文档更完善,更多的人使用它。

https://www.chartjs.org/

使用chart.js我得到了这个结果:

<!doctype html>
<html>

<head>
	<title>Line Styles</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

	<style>
	canvas{
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div style="width:75%;">
		<canvas id="canvas"></canvas>
	</div>
	<script>

var ctx = document.getElementById('canvas').getContext('2d')

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [0, 0, 0, 0, 0, 0, 1]
        }, {
            label: 'Line Dataset',
            data: [30.03, 31.03, 1.04, 2.04, 3.04, 4.04, 5.04],

            // Changes this dataset to become a line
            type: 'line'
        }],
        labels: ['1', '2', '3', '4','5','6','7']
    },
});
	</script>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.