ChartJS 显示图表Js中特定点的数据标签

zbq4xfa0  于 2023-01-26  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

我正试图建立一个chart.js线和散点,我想有数据标签显示只是在散点,我已经尝试过用datalabels插件从图表js,但它显示了所有数据集的数据标签,包括线,我怎么能只显示特定的散点?这是代码看起来像什么:

Chart.register(ChartDataLabels);

        fetch('https://raw.githubusercontent.com/ConeDigital/assets/main/data.json')
        .then(response => response.json())
        .then(data => {
            var ctx = document.getElementById('myChart2').getContext('2d'),
                chart = new Chart(ctx, {
                    type: 'line',
                    data: getChartData(data),
                    options: {
                        legend: {
                            display: false
                        },
                         plugins: {
                                datalabels: { // This code is used to display data values
                                    anchor: 'end',
                                    align: 'top',
                                    font: {
                                        weight: 'bold',
                                        size: 16
                                    }
                                }
                            },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel+"%";
                                },
                                labelColor: function (tooltipItem, chart) {
                                    let border = ''
                                    let background = ''
                                    let colors
                                    if ( tooltipItem.datasetIndex === 1 ) {
                                        colors = {
                                            borderColor: '#fff',
                                            backgroundColor: '#001F5B'
                                        }
                                    } else {
                                        colors = {
                                            borderColor: '#fff',
                                            backgroundColor: '#eb8484'
                                        }
                                    }
                                    return colors
                                }
                            }
                        },
                        responsive: true,
                        scales: {
                            xAxes: [{
                                stacked: false,
                                scaleLabel: {
                                    display: false,
                                    labelString: 'Datum'
                                },
                                ticks: {
                                    display: false
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }],
                            yAxes: [{
                                stacked: false,
                                ticks: {
                                    display: false
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false
                                },
                                scaleLabel: {
                                    display: false,
                                    labelString: 'Procent'
                                }
                            }]
                        }
                    }
                });
        })
        
        

        function getChartData(json) {
            var labels = [];
            
            var omx_dataset = {
                label: 'OMXS30',
                borderColor: '#eb8484',
                fill: false,
                pointRadius: 0,
                borderWidth: 1,
                data: []
            };

            var gadd_dataset = {
                label: "GADD SMP SEK",
                borderColor: '#001F5B',
                fill: false,
                pointRadius: 0,
                borderWidth: 1,
                data: []
            };
            
        var mark1_dataset = {
                  label: 'Start',
                  borderWidth: 2,
                  borderColor: '#FF0000',
                  fill: false,
                  type: 'scatter',
                  data: [{
                   x: '2011-03-29',
                   y: 0
                  }],
                 
                  pointRadius: 12
                };
                
        var mark2_dataset = {
                  label: '2016',
                  borderWidth: 2,
                  borderColor: '#FF0000',
                  fill: false,
                  type: 'scatter',
                  data: [{
                   x: '2015-12-31',
                   y: 20
                  }],
                  
                  pointRadius: 12
                };  

          var mark3_dataset =   {
                  label: '2020',
                  borderWidth: 2,
                  borderColor: '#FF0000',
                  fill: false,
                  type: 'scatter',
                  data: [{
                   x: '2020-01-07',
                   y: 59
                  }],
                  
                  pointRadius: 12
                };  

          var mark4_dataset =   {
                  label: '2022',
                  borderWidth: 2,
                  borderColor: '#FF0000',
                  fill: false,
                  type: 'scatter',
                  data: [{
                   x: '2022-01-03',
                   y: 109
                  }],
                  
                  pointRadius: 12
                };                      
            
            json.map((point,i) => {
                labels.push(point.Date)
                const gadd_num = (point['GADD SMP SEK']*100).toFixed(2)
                const omx_num = (point['OMXS30']*100).toFixed(2)
                gadd_dataset.data.push(gadd_num)
                omx_dataset.data.push(omx_num)
                
                //console.log(point.Date)
                //result1_dataset.data.push(point.date)

            })

            return {
                labels: labels,
                datasets: [omx_dataset, gadd_dataset, mark1_dataset, mark2_dataset, mark3_dataset, mark4_dataset]
            }
        }

现在它显示了所有数据集的所有数据标签,看起来很混乱,提前感谢

ijnw1ujt

ijnw1ujt1#

您可以将数据标签配置添加到线数据集,禁用插件,如下所示:

var omx_dataset = {
     label: 'OMXS30',
     borderColor: '#eb8484',
     fill: false,
     pointRadius: 0,
     borderWidth: 1,
     data: []
      
     datalabels: {
       display: false
     }
};

var gadd_dataset = {
     label: "GADD SMP SEK",
     borderColor: '#001F5B',
     fill: false,
     pointRadius: 0,
     borderWidth: 1,
     data: [],
      
     datalabels: {
       display: false
     }
};

相关问题