猿问

如何将图表的某些部分显示为.js为虚线，而其余部分显示为粗体？

我是新手。


我想将折线图的最后一块（从2020/05/27到2020/05/29）显示为与图表其余部分颜色不同的虚线。


简而言之，我想突出显示图表读数的最后一块，而不是其余的。


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

        var data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];

        var myChart = new Chart(ctx, {

            type: 'line',

            data: {

                labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],

                datasets: [{

                    label: 'Count',

                    data: data_array,

                    lineTension: 0,

                    borderColor: [

                        'rgba(255, 99, 132, 1)',

                    ],

                    borderWidth: 5

                }]

            },

            options: {

                scales: {

                    yAxes: [{

                        ticks: {

                            min: Math.round(Math.floor(Math.min.apply(this, data_array) - 50)/ 10) * 10,

                            max: Math.round(Math.floor(Math.max.apply(this, data_array) + 50)/ 10) * 10

                        }

                    }]

                }

            }

        });

<!doctype html>

<html>


<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>


    <title>CodeWithHarry</title>

</head>




德玛西亚99
浏览 89回答 1
1回答

潇湘沐

插件核心 API&nbsp;提供了一系列可用于执行自定义代码的挂钩。您可以使用钩子直接在画布上使用文本在不同数据点之间绘制不同样式的线条&nbsp;画布呈现Context2D。beforeDraw如果最后一个数据点的颜色也不同，则可以定义为数组。它应该包含每个值的条目，除了最后一个值之外，所有值都是相同的。这可以使用数组.map（）&nbsp;完成，如下所示。dataset.borderColorborderColor:&nbsp;data_array.map((v,&nbsp;i)&nbsp;=>&nbsp;i&nbsp;+&nbsp;1&nbsp;==&nbsp;data_array.length&nbsp;?&nbsp;'rgb(0,&nbsp;0,&nbsp;255)'&nbsp;:&nbsp;'rgba(255,&nbsp;99,&nbsp;132)'),请看下面的可运行代码片段。const data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];var myChart = new Chart('myChart', {&nbsp; type: 'line',&nbsp;&nbsp;&nbsp; plugins: [{&nbsp; &nbsp; beforeDraw: chart => {&nbsp; &nbsp; &nbsp; var ctx = chart.chart.ctx;&nbsp; &nbsp; &nbsp; ctx.save();&nbsp; &nbsp; &nbsp; var xAxis = chart.scales['x-axis-0'];&nbsp; &nbsp; &nbsp; var yAxis = chart.scales['y-axis-0'];&nbsp; &nbsp; &nbsp; data_array.forEach((value, index) => {&nbsp; &nbsp; &nbsp; &nbsp; if (index > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var valueFrom = data_array[index - 1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var xFrom = xAxis.getPixelForTick(index - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var yFrom = yAxis.getPixelForValue(valueFrom);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var xTo = xAxis.getPixelForTick(index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var yTo = yAxis.getPixelForValue(value);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.lineWidth = 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (index + 1 == data_array.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.setLineDash([5, 5]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.strokeStyle = 'rgb(0, 0, 255)';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.strokeStyle = 'rgb(255, 99, 132)';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.moveTo(xFrom, yFrom);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.lineTo(xTo, yTo);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; ctx.restore();&nbsp; &nbsp; }&nbsp; }],&nbsp; data: {&nbsp; &nbsp; labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'Count',&nbsp; &nbsp; &nbsp; data: data_array,&nbsp; &nbsp; &nbsp; tension: 0,&nbsp; &nbsp; &nbsp; showLine: false,&nbsp; &nbsp; &nbsp; borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),&nbsp; &nbsp; &nbsp; borderWidth: 5&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; animation: {&nbsp; &nbsp; &nbsp; &nbsp; duration: 0&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvas id="myChart" height="100"></canvas>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答