标签: charts

嘿,我有一个文件json,你在图像中看到(1)我想创建一个图表像这样(第二个图像)使用javascript(任何库)我怎么能简单地做？我想要一个简单的代码示例

我正在使用Chart.js的包装器，该包装器允许动画回调来确定何时绘制图表。

因此，我的图表选项如下所示：

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim complete');
            this.chartTestMethod();
        }
    },
    responsive: true
};

我的chartTestMethod()样子是这样的：

chartTestMethod() {
     console.log('chartTestMethod called.');
}

我希望chartTestMethod()在图表动画完成时调用该方法（在同一TypeScript文件中）。但是，当动画完成并且执行了该方法调用行时，出现错误：

TypeError: this.chartTestMethod is not a function. 

基本上，如何正确调用该方法？

我想通过java POI在excel中添加行,我尝试使用shiftRows()函数和createRow()函数

这两个函数都可以在excel中添加行但在图表位置下方保留并且不移动

我也想移动(向下移动)图表的位置

我使用poi版本3.9

任何人都可以给我建议或想法移动该图表图像的位置

事实上,图表的数据范围也没有改变.我不仅需要移动图表的位置,还需要增加图表的数据范围

谢谢!!

我正在使用ChartJS 2.0在UI上绘制图形.我能够渲染饼图.但我希望鼠标悬停显示数据以及" % "符号.我怎么能追加%所以如果鼠标悬停我Rented: 93想要看到Rented: 93 %.请指导我.

以下是我现在的情况:

var sixthSubViewModel = Backbone.View.extend({
        template: _.template($('#myChart6-template').html()),
        render: function() {
          $(this.el).html(this.template());
          var ctx = this.$el.find('#pieChart')[0];
          var data = {
            datasets: [{
              data: this.model.attributes.currMonthOccAvailVac,
              backgroundColor: [
                "#455C73",
                "#BDC3C7",
                "#26B99A",
              ],
              label: 'My dataset' // for legend
            }],
            labels: [
              "Rented",
              "Vacant",
              "Unavailable",
            ]
          };
            var pieChart = new Chart(ctx, {
              type: 'pie',
              data: data
            });
        },
        initialize: function(){
            this.render();
        }   
    });

理解: 我理解当前悬停需要label并添加一个colon …

我正在使用MPAndroidChart,我想在显示的每个间隔删除背景行.试过这个但没用.dailyTargetChart.setDrawGridBackground(假);

XAxis xl = dailyTargetChart.getXAxis();
                        xl.setDrawAxisLine(true);
                        xl.setDrawGridLines(false);

                        YAxis yl = dailyTargetChart.getAxisLeft();
                        yl.setDrawAxisLine(true);
                        yl.setDrawGridLines(true);

                        YAxis yr = dailyTargetChart.getAxisRight();
                        yr.setDrawAxisLine(true);
                        yr.setDrawGridLines(false);

也尝试了这一点,但是每隔一段时间仍然可以看到垂直线

我想在chart.js条形图上自定义工具提示.这是我的代码:

$(function () {
  var barData = no_houses_person

var barOptions = {
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    legend: {
        display: true,
        position: 'top'
    },
    scaleGridLineWidth: 1,
    barShowStroke: true,
    barStrokeWidth: 1,
    barValueSpacing: 5,
    barDatasetSpacing: 1,
    responsive: true,
};
   var ctx = document.getElementById("barChart").getContext("2d");
   var myNewChart = new Chart(ctx, {
    type: 'bar',
    data: barData,
    options: barOptions
});
});

我已经尝试添加tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> example)",到barOptions但它没有任何效果.

我正在尝试使用AmCharts制作图表,并在他们的网站上关注此示例:https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/

我的原始代码是

var chart = AmCharts.makeChart("chart_1", {
        "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/",

        "dataProvider": [{
            "year": 2009,
            "income": 23.5,
            "expenses": 18.1
        }, {
            "year": 2010,
            "income": 26.2,
            "expenses": 22.8
        }],
            // bunch of graph stylings
    });

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() {
        chart.invalidateSize();
    });
}

我尝试从mysql加载数据

var chart = AmCharts.makeChart("chart_1", {
    "type": "serial",
    "dataProvider": {
        "url": "data.php"
    },
        "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/",

      // bunch on graphs style

    });

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() {
        chart.invalidateSize();
    });
}

包含硬编码数据的原始代码正在运行.下面用mysql不起作用.它是空白页面,不显示图表.控制台上也没有错误.

data.php 正在工作并返回json数组.

有人可以帮忙吗？

如果还需要php部分

$query = "
       SELECT *
       FROM …

我将我的价值存储在核心数据中并在BarChart上显示.我的类别金额为8.5和420.10.

但条形图的显示是8和420.我应该如何设置十进制值？

var dataEntries: [BarChartDataEntry] = []

   for i in 0..<dataPoints.count {
     let value = values[i] as Double
     print("value=\(value)")
     let dataEntry = BarChartDataEntry(x: Double(i), y:value)
     dataEntries.append(dataEntry)
 }

let chartDataSet = BarChartDataSet(values: dataEntries, label: "Total Amount")
chartDataSet.colors = [.red, .yellow, .green, .blue, .brown]
chartDataSet.colors = ChartColorTemplates.joyful()
barChartView.xAxis.labelPosition = .bottom
barChartView.chartDescription?.text = ""
barChartView.xAxis.drawGridLinesEnabled = false
barChartView.leftAxis.drawLabelsEnabled = false
barChartView.leftAxis.granularityEnabled = true

let chartData = BarChartData()
chartData.addDataSet(chartDataSet)
barChartView.data = chartData

我的Google折线图有问题，我的系统以交互方式提供数据，我需要在更改时以交互方式更新Google图表。为了做到这一点，我chart.draw(...)在每次数据上传期间都打电话给我。不幸的是，进行这样的调用会重置组件的视觉状态。

考虑以下jsfiddle http://jsfiddle.net/1besonf5/83/

如果缩放组件，它将在一秒钟内重置。由于

setInterval(() => chart.draw(data, chartOptions), 3000);

您如何处理这个问题？

您好，我有一个很大的数据库，我从那里取了1500个值以便在图表中显示。

我的问题是显示所有点需要很长时间，我认为是因为动画设置。

如何更改动画的速度，或者有什么方法可以更快地显示点？

<UserControl x:Class="Ipte.UI.Pages.StatisticsPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:gcl="clr-namespace:GuiControlLibrary;assembly=GuiControlLibrary"
        xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
             xmlns:time="clr-namespace:Ipte.UI"
        xmlns:chartToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        mc:Ignorable="d"
        Height="800" Width="1200">
    <UserControl.Resources>
        <Style x:Key="Scater" TargetType="chartToolkit:ScatterDataPoint">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartToolkit:ScatterDataPoint">
                        <Viewbox x:Name="viewbox">
                            <!--<Ellipse Width="1" Height="1" Fill="Black"/>-->
                        </Viewbox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="4"/>
            <Setter Property="Height" Value="4"/>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="filterGrid" Grid.Column="0" Margin="4">
            <StackPanel>
                <TextBlock Text="" Margin="2"/>
                <toolkit:DatePicker x:Name="dpStartDate" Margin="2" />
                <time:TimePicker x:Name="tpStartTime" Margin="2"/>             
                <TextBlock Text="End date &amp; time:" Margin="2"/>
                <toolkit:DatePicker x:Name="dpEndDate" Margin="2"/>
                <time:TimePicker x:Name="tpEndTime" Margin="2"/>

                <gcl:GuiGroupBox Header="Select router" …