标签: column-chart

Google柱形图自定义图例

我想自定义我的柱形图API,如下所示

1)当我单击图例时,与其关联的数据集应返回null并以禁用的颜色显示图例.我的代码如下.

function drawVisualization() {
    // Create and populate the data table.
    var chart_div       =   document.getElementById('visualization2');

    var data2           =   google.visualization.arrayToDataTable([["Sections","Client Scored",{ role: "style" },"Client Confidence",{ role: "style" },"Average Mark",{ role: "style" },"Average Confidence",{ role: "style" }],["Set 1",90,"opacity: 1",95,"opacity: 0.5",78,"opacity: 1",69,"opacity: 0.5"],["Set 2",65,"opacity: 1",73,"opacity: 0.5",99,"opacity: 1",99,"opacity: 0.5"]]);  
    var options = {
      title:"Understanding",
      width:'100%', height:600,seriesType: "bars"
        ,series:{1: {type: "line",pointSize: 10,lineWidth :0},3: {type: "line",pointSize: 10,lineWidth :0}}
        ,colors: ['#fafe14','#fafe14','#05afed','#05afed']
      ,vAxis: {title: "%Score",format: '##', minValue: '1', maxValue: '8'},      
      hAxis: {title: "",slantedText: true,slantedTextAngle:60, maxTextLines: 5, maxAlternation: …

Run Code Online (Sandbox Code Playgroud)

google-visualization bar-chart legend-properties column-chart

Pre*_*thy

lucky-day

7
推荐指数

1
解决办法

1180
查看次数

带有线条的柱形图 - 组合图表自定义

一只忙碌的猫

哪个JS库最好做以上类型的图表？

我想将聚集柱形图与折线图结合起来,如上图所示.

我的要求是每列应该设置低值和高值

javascript linechart jscharts column-chart

Mid*_*yan

2019 10-23

6
推荐指数

1
解决办法

126
查看次数

如何在数据标签中显示系列图例标签名称，而不是在 Power BI 聚类或堆积柱形图中显示值

我对 Power BI 相当陌生，我必须实现一个我已经在 Excel 中使用的仪表板。我试图展示一些产品的转变。所示示例用于演示。基本上，该图的目的是显示不同水果在不同阶段的体积变化。即我们从第 1 阶段“橙苹果芒果草莓”移动到第 2 阶段“橙苹果蓝莓”再到第 3 阶段“椰子桃苹果”，我们可以看到它们各自的体积。*请原谅我的Appricot拼写

在 Excel 中，如果在“标签”选项中勾选“系列名称”并取消勾选“值”，则可以实现此目的。见附图

在 Excel 中，人眼和大脑很容易掌握/处理这种转变。

另一方面，Power BI 仅提供显示值的选项（格式->数据标签”），这使得当有人看到图表时很难理解。

您是否知道任何可能的方法来显示类别的名称而不是它们的值，或者通常控制显示的内容（如在 Excel 中）？

当前的图表是簇状柱形图，但问题也适用于堆积柱形图。

数据：

Stage   Category    Volume
Stage 1 Orange      10
Stage 1 Apple       23
Stage 1 Mango       14
Stage 1 Strawberry  13
Stage 2 Orange      30
Stage 2 Apple       18
Stage 2 Blueberry   12
Stage 3 Coconut 18
Stage 3 Peach       18
Stage 3 Appricot    24

Run Code Online (Sandbox Code Playgroud)

似乎尚不支持这一点，但我想知道是否有解决方法或其他解决方案。（https://community.powerbi.com/t5/Desktop/add-legend-info-to-data-labels/mp/366072 /highlight/true#M165593）并且他们有社区投票（https://ideas.powerbi.com/forums/265200-power-bi-ideas/suggestions/33477430-add-legend-info-to-data-labels）

excel charts label powerbi column-chart

Dio*_*ios

2020 01-30

6
推荐指数

1
解决办法

5730
查看次数

如何在javascript中使用自定义值和轴标签创建自定义列线图？

我想知道我是否可以使用一些javascript库,如highcharts,google charts,amcharts或d3js来创建如下图表:

在此输入图像描述

正如您在图像中看到的那样,顶部部分包含每列中绘制的3个值的摘要,因此需要在顶部具有自定义轴标签,其中可以显示所有这些信息. 带有自定义信息的轴标签

并且绘制的每个值也有一个矩形框,其中包含值(即其价格),名称和它所属的段. 带有自定义信息的价值框

javascript charts column-chart

Cri*_*tus

lucky-day

5
推荐指数

1
解决办法

262
查看次数

在 Google 图表中显示 X 轴标题

我想在 Android Web 视图中显示柱形图的 x 轴标题google charts。我试图显示 x 轴标题，如下Year所示

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

Run Code Online (Sandbox Code Playgroud)

但它没有显示标题。完整代码；

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

     function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, …

Run Code Online (Sandbox Code Playgroud)

javascript android google-visualization column-chart

Hum*_*mty

2017 03-13

5
推荐指数

1
解决办法

4767
查看次数

如何在ColumnChart中更改条形颜色和图例

我正在使用谷歌图表显示两个方面的柱形图:

1)成功

2)失败

成功:颜色=绿色

对于失败:颜色=红色

但问题是ColumnChart总是以蓝色显示条形,我也想要传说:

Success
Failed

Run Code Online (Sandbox Code Playgroud)

但它显示Legends为"值",如下所示:

代码:

 angular.module("google-chart-sample", ["googlechart"])
.controller("GenericChartCtrl", function ($scope) {
    var data = { "data": { "graphResponse": { "cols": [{ "label": "Types", "type": "string" }, { "label": "values", "type": "number" }], "rows": [{ "c": [{ "v": "success" }, { "v": 11 }] }, { "c": [{ "v": "failed" }, { "v": 0 }] }] } } };
    $scope.myChartObject = {};
    $scope.myChartObject.type = "ColumnChart";
    $scope.myChartObject.data = data.data.graphResponse; …

Run Code Online (Sandbox Code Playgroud)

javascript angularjs column-chart

ILo*_*low

lucky-day

5
推荐指数

0
解决办法

278
查看次数

从谷歌图表中删除列键

我正在使用谷歌柱形图。我需要更改列键的方向，该方向在下图中突出显示为红色圆圈。

所以我想实现什么

是否有任何属性，以便我可以更改顶部、底部或左侧等方向，以便它正确显示（收入），目前它显示（R...）。
如果方向无法更改，那么如何将其从图表中删除

charts google-visualization column-chart

Kus*_*ain

2018 04-13

4
推荐指数

1
解决办法

2021
查看次数

Highchart工具提示中的逗号

我使用Highchart绘制一些图表。我在highchart的工具提示中使用以下格式：

tooltip: {
     crosshairs: [true, true],
     shared: true,
     useHTML: true,
    formatter: function() {

            var s = [];
            s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' + 
             this.x + '</b></td></tr>');
            $.each(this.points, function(i, point) {
                s.push('<tr><td style="text-align: right;">'+
                              '<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
                           '</td>'+
                           '<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
                           '<td><b>' + point.y+'</b></td>'+
                       '</tr>');
            });

            s.push('<tr><td style="text-align:right;" colspan="3"><b>????? ??? : ' +
             this.points[0].point.NumberNews + '</b></td></tr></table>');                                   
            return s;   
    }
},

Run Code Online (Sandbox Code Playgroud)

结果是一样的：

我的问题是：为什么在此工具提示的顶部打印一些逗号？如何删除这些？

谢谢

highcharts column-chart

nar*_*ges

2019 06-17

3
推荐指数

1
解决办法

188
查看次数

高图：我们可以减少分组柱形图中两个条形之间的距离吗

使用 Highcharts 中的此示例显示具有负值的分组柱形图 https://www.highcharts.com/demo/column-negative

当我们在 x 轴上的属性较少时，相同值的两个条形之间的距离变宽。我们可以通过使用任何选项来减少这个距离并使两个条形每个月看起来彼此靠近吗？附上问题的输出。示例图表

我使用的选项是：

plotOptions: {
    column: {
       dataLabels: {
          enabled: false
       },
       pointWidth: 15
    },
    series: {
       centerInCategory: true
    }
},

Run Code Online (Sandbox Code Playgroud)

bar-chart highcharts column-chart

use*_*931

lucky-day

2
推荐指数

1
解决办法

57
查看次数

Highcharts将带有多个轴的条形图分组

我对这里的答案不满意: 在高级图表中列图表类别的多个y轴

据我所知,你可以创建多个y轴,可以使用yAxis:0,1,2等为每个系列选择它们.是否可以为条形图组执行此操作？

在下面的示例中,我想要3个组(计数A,计数B,百分比),每个组有4个人(John,Joe,Jane,Janet).除了在一个轴上具有计数组而在另一个轴上具有百分比组之外,我该如何做？

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

Run Code Online (Sandbox Code Playgroud)

javascript highcharts column-chart

作者

2017 05-23

1
推荐指数

1
解决办法

1711
查看次数

如何制作柱形图？

我在做图表时遇到问题。我希望在同一行中输出图表，而不更改代码，也不使其水平。我希望使用 for 循环来解决这个问题，因为我可以迭代所有内容，因为我有相同的元素。

代码显示如下：

# include <iostream>
using namespace std;

class InterestCalculator
{
protected:
    float principal_amount = 320.8;
    float interest_rate = 60.7;
    float interest = interest_rate/100 * principal_amount; 
public:
    void printInterest()
    {
    cout<<"Principal Amount: RM "<<principal_amount<<endl;
    cout<<"Interest Rate(%): "<<interest_rate<<endl;
    cout<<"Interest: RM"<<interest<<endl;
    }
};

class LoanCalculator : public InterestCalculator
{
private:
    int loan_term;
    int month;
    float month_payment;
public:

void displayVariable()
{
    cout<<"Enter loan amount (RM): ";
    cin>>principal_amount;
    cout<<"\n\nEnter annual interest rate(%): ";
    cin>>interest_rate;
    interest_rate = interest_rate / 100;
    cout<<"\n\nEnter …

Run Code Online (Sandbox Code Playgroud)

c++ column-chart

CPP*_*ARD

2022 10-18

-2
推荐指数

1
解决办法

317
查看次数