在 Charts.Js v2.9.4 中的对数图表中添加小网格线

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

我想在下面绘制的图表中绘制小网格线，以获得与下图中的 x 轴类似的结果（除了不是以简单数字而不是功率显示刻度值，即 10^0 它应该显示 1 和而不是 10^1，它应该显示 10 等等。图像是操作系统，旨在仅显示 x 轴上的网格线）：

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title>Chart</title>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { width: 100%; }
    </style>
</head>
<body>
<div id='container'>
    <canvas id='myChart'></canvas>
</div>
<script>
    Chart.defaults.global.animation.duration = 1000;
    Chart.defaults.global.animation.easing = 'linear';
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['10','2000','30000','50000','60000','700000',],
            datasets: [
               {label: 'ABC' ,
                fill: true ,
                data: [ 
                  { x: '10', y: 2 },
                  { x: '2000', y: 4 },
                  { x: '30000', y: 7 },
                  { x: '50000', y: 8 },
                  { x: '60000', y: 8.5 },
                  { x: '700000', y: 9 }
                  ],
                borderWidth: 1},
             ]
        },
        options: {
            aspectRatio:  1.6,
            title: {
                display: true,
                position: 'top',
                text: 'Ref Data'
            },
            legend: {
                display: true,
                position: 'right',
            },
            scales: {
                yAxes: [{
                    id: 'first-y-Axis',
                    display: true,
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo y-axis'
                    }
                    }],
                xAxes: [{
                    id: 'first-x-Axis',
                    display: true,
                    type: 'logarithmic',
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo x-axis'
                    },
                    ticks: {
                       //min:  0 ,
                       //max:  700000
                       callback: function (value, index, values) {
                       if (Math.log10(value) % 1 === 0) { return value; }
                       }
                    }
                    }]
            },
            plugins: {
                colorschemes: {
                    scheme: 'brewer.Paired12'
                    }
                }
        }
    });
</script>
</body>
</html>

类似的解决方案也在帖子链接此处中讨论，但该帖子中使用的代码非常复杂，我无法理解并使其在我的代码中工作，因为我对 JavaScript 不太了解。只是想为ine应用程序制作这个图表。如果这里有人可以修改我的代码或帮助我修改代码以获得像图像或上面链接的帖子中的小网格线（除了帖子中为 y 轴创建的小网格线，但我想要 x 轴），我将不胜感激).

致以诚挚的问候

javascript charts chart.js
1个回答
0
投票

与 OP linked post 中的情况一样，如果 

ticks.callback
返回空字符串而不是 
null
或 
undefined
（或者如果没有
ticks.callback
）。

但是，人们在设计次要网格线以将其与主要网格线区分开来的方式上存在差异。在 Chart.js v2.9.4 中，秤的 

gridLines
选项不可编写脚本。这需要一种不同的方法，在某些情况下可能在新版本中有用：使用可索引选项， 这意味着必须为每个项目（在本例中为每条网格线）创建一个具有（不同）值的数组。由于刻度仅在运行时已知，因此可以在 axis 回调 中创建该数组，例如，在 
afterBuildTicks
:

中 
afterBuildTicks(xScale){
    const nTicks = xScale.ticks.length,
        isMajor = xScale.ticks.map(value => ('' + value).charAt(0) === '1');
    xScale.options.gridLines.lineWidth = 
        Array.from({length: nTicks}, (_, i) => isMajor[i] ? 1.2 : 0.5);
    xScale.options.gridLines.color = 
        Array.from({length: nTicks}, (_, i) => isMajor[i] ? '#000' : '#ddd');
    //xScale.options.gridLines.borderDash - can't be set as an array of arrays
}

不幸的是，这种方法似乎不适用于

borderDash
。

代码片段：

Chart.defaults.global.animation.duration = 1000;
Chart.defaults.global.animation.easing = 'linear';
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['10', '2000', '30000', '50000', '60000', '700000',],
        datasets: [{
            label: 'ABC',
            fill: true,
            data: [{
                x: '10',
                y: 2
                },
                {
                    x: '2000',
                    y: 4
                },
                {
                    x: '30000',
                    y: 7
                },
                {
                    x: '50000',
                    y: 8
                },
                {
                    x: '60000',
                    y: 8.5
                },
                {
                    x: '700000',
                    y: 9
                }
            ],
            borderWidth: 1
        },]
    },
    options: {
        aspectRatio: 1.6,
        title: {
            display: true,
            position: 'top',
            text: 'Ref Data'
        },
        legend: {
            display: true,
            position: 'right',
        },
        scales: {
            yAxes: [{
                id: 'first-y-Axis',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Demo y-axis'
                }
            }],
            xAxes: [{
                id: 'first-x-Axis',
                display: true,
                type: 'logarithmic',
                scaleLabel: {
                    display: true,
                    labelString: 'Demo x-axis'
                },
                gridLines: {
                    borderDash: [10, 3],
                    drawTicks: false,
                    drawBorder: false
                },
                afterBuildTicks(xScale){
                    const nTicks = xScale.ticks.length,
                        isMajor = xScale.ticks.map(value => ('' + value).charAt(0) === '1');
                    xScale.options.gridLines.lineWidth = Array.from({length: nTicks}, (_, i) => isMajor[i] ? 1.2 : 0.5);
                    xScale.options.gridLines.color = Array.from({length: nTicks}, (_, i) => isMajor[i] ? '#000' : '#ddd');
                    //xScale.options.gridLines.borderDash - can't be set as an array of arrays
                },
                ticks: {
                    padding: 5,
                    autoSkip: false,
                    maxRotation: 0,
                    callback: function(value, index, values){
                        if(Math.log10(value) % 1 === 0){
                            return value;
                        }
                        return '';
                    }
                }
            }]
        },
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"
        integrity="sha512-SuxO9djzjML6b9w9/I07IWnLnQhgyYVSpHZx0JV97kGBfTIsUYlWflyuW4ypnvhBrslz1yJ3R+S14fdCWmSmSA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>        
<div style="min-height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.