kibana 折线图 (Line) --- 2022-04-03

Posted 2023-04-11

参考技术A 本章介绍使用Kibana的Visualize绘制折线图 (Line)

效果图：

步骤1
打开Kibana的Visualize页面

步骤2
选择折线图

步骤3
选择数据源，即选择Kibana创建的索引模式，这里选择航班数据。

步骤4
设置折线图(Line)的Y轴的聚合指标，这里我们统计每天的航班信息总数，因此选择count，当然默认就是count，可以不用设置。

步骤5
设置折线图（Line）X轴，X轴主要由桶聚合实现分组，我们这里根据每天统计航班信息。

配置桶聚合参数

运行效果

ChartJS 折线图 - 去除线条下方的颜色

【中文标题】ChartJS 折线图 - 去除线条下方的颜色

【英文标题】：ChartJS Line Charts - remove color underneath lines

【发布时间】：2016-11-08 09:46:07

【问题描述】：

好的，所以我有一个 ChartJS 折线图，它直接从来自我的数据库的数据中填充。 我现在需要的是去掉每条线下面的颜色。 [如下图所示]。

这是我的 HTML：

<div ng-if="hasData">
    <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="options" click="onClick"></canvas>
<div>

这是我的 JS：

            scope.labels = ['02:00','04:00','06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00'];
            scope.series = series;
            scope.data = [volumesSelectedDate, volumesPeakDate, volumesModelCapacity];
            
                            
            scope.options = 
                scaleOverride: true,
                scaleStartValue: 0,
                scaleSteps: 11,
                scaleStepWidth: 6910,
            
            
            scope.loadingDailyAppVolumes = false;
            scope.hasData = true;
            
            
        ;
        scope.onClick = function (points, evt) 
            //console.log(points, evt);
        ;
    

那么，我该怎么做呢？ 另外，我将如何手动设置每行的颜色？

例子：

选定日期：蓝色， 高峰日期：黄色， 模型容量：灰色。

谢谢。

【参考方案1】：

在 Chart.js 文档中查看 this section。在数据集配置中将 fill 属性设置为 false：

var data = 
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        label: "My First dataset",
        fill: false,
        data: [1, 2, 3]
    ]
;

如果您希望每条线具有不同的笔触颜色，请为 borderColor 属性指定一个数组：

var myColors = ['red', 'green', 'blue']; // Define your colors

var data = 
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        label: "My First dataset",
        fill: false,
        borderColor: myColors
        data: [1, 2, 3]
    ]
;

【讨论】：

好的，但我对每个图表的设置都不同。我没有数据集配置。

...这个不同的设置是什么？你为chart.js 使用了一些角度插件吗？您是否创建了自定义代码？

@LinusBorg 我也想知道。在文档中找不到有关该特定设置的任何内容。

我是 Chart.js 的贡献者，问题中的代码不是来自核心库。

【参考方案2】：

这对我有用：

$scope.color = [
                  backgroundColor: 'transparent',
                  borderColor: '#F78511',
                ,];

【参考方案3】：

我解决了这个问题。

第一步。 html 元素内部添加

<canvas id="line" class="chart chart-line" data="data" labels="labels" chart-colors="colors" legend="true" series="series" options="options" click="onClick"></canvas>

第二步。 $scope val 颜色 添加 像这样：

$scope.colors = [
        backgroundColor : '#0062ff',
        pointBackgroundColor: '#0062ff',
        pointHoverBackgroundColor: '#0062ff',
        borderColor: '#0062ff',
        pointBorderColor: '#0062ff',
        pointHoverBorderColor: '#0062ff',
        fill: false /* this option hide background-color */
    , '#00ADF9', '#FDB45C', '#46BFBD'];

祝你好运！

【参考方案4】：

以下解决方案在将图表 js 与 Angular 集成时有效

$scope.options = 
                    scales: 
                      yAxes: [
                        
                          id: 'y-axis-1',
                          type: 'linear',
                          display: true,
                          position: 'left'
                        
                      ]
                    ,
                    elements: 
                        line: 
                                fill: false
                        
                    
                ;

<canvas id="" class="col-sm-12 chart chart-line" chart-data="data"
                            chart-options="options" chart-colors="colors">
</canvas>

【参考方案5】：

我遇到了同样的问题，使用 angular-chart.js 并通过以下方式获得了所需的结果：

$scope.override = 
    fill: false
;

和

<canvas class="chart chart-line" 
    chart-dataset-override="override"
    chart-data="data">
</canvas>

【参考方案6】：

只需在数据集选项中将填充选项设置为 false：

data: 
   datasets: [
      label: "",
      data: dataPoints,
      borderColor: color ,
      fill:false //this for not fill the color underneath the line
                                ]
                            ,

【参考方案7】：

只需调整 ts 文件以包含 ::

chartOptions = 
scales:  xAxes: [],  yAxes: [] ,
elements:  line:  fill: false  
;

html 文件看起来像 ::

<div style="display: block; width: 500px; height: 400px;">
<canvas
  baseChart
  [chartType]="'line'"
  [datasets]="chartData"
  [labels]="chartLabels"
  [colors]="lineChartColors"
  [options]="chartOptions"
  [legend]="true"
  (chartClick)="onChartClick($event)">
</canvas>
</div>

这会起作用

【参考方案8】：

设置fill:值false

let chart = new Chart('myChart', 

type: 'line',
    data: 
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            fill: false, // <-- Here
        ]
    ,
    options: 
        responsive: true,
        maintainAspectRatio: false,
        scales: 
            y: 
                beginAtZero: true
            
        
    
);

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart"  ></canvas>