标签: charts

我的场景是：我使用 phantomjs 生成固定大小的图表图像，使用 chart.js 呈现。我注意到当标签太多时，图例开始占用越来越多的可用（固定）屏幕空间，直到图表几乎不可见，如下所示： 有没有办法强行限制图例高度？或者为图表区域高度设置一个硬最小值？从这里调试和查看代码：https : //github.com/chartjs/Chart.js/blob/v2.6.0/src/plugins/plugin.legend.js和这里：https : //github.com/chartjs /Chart.js/blob/v2.6.0/src/core/core.layoutService.js，我没有看到任何有用的东西。希望我错过了什么。

使用 v2.6.0，这里是我使用的图表定义 JSON：

{
  "type": "line",
  "title": "DaTitle",
  "xLabel": "DaLabel",
  "yLabel": "DaYLabel",
  "data": {
    "labels": ["Time0", "Time1", "Time2", "Time3", "Time4", "Time5", "Time6", "Time7", "Time8", "Time9", "Time10", "Time11", "Time12", "Time13", "Time14", "Time15", "Time16", "Time17", "Time18", "Time19"],
    "datasets": [{
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [45, 19, 70, 96, 8, 44, 49, 3, 10, 75, 71, 80, 29, 44, 22, 30, 59, 67, 17, 34]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": …

我试图在chart.js中放置矩形来制作上下范围/级别，就像在图像中一样

虽然我可以通过在这个例子中画两条线来实现

var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
    afterDraw: function(chart) {
        if (typeof chart.config.options.lineAt != 'undefined') {
        	var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            
            ctxPlugin.strokeStyle = "green";
        	ctxPlugin.beginPath();
            lineAt = 102;
            ctxPlugin.moveTo(xAxe.left, lineAt);
            ctxPlugin.lineTo(xAxe.right, lineAt);
            ctxPlugin.moveTo(xAxe.left, lineAt-33);
            ctxPlugin.lineTo(xAxe.right, lineAt-33);
            ctxPlugin.stroke();
        }
    }
});
var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
              datasets: [{
                  label: 'Findings',
                  data: [0,45],
                  backgroundColor: 'rgba(54, 162, 235, 0.2)',
                  borderColor: 'rgba(54, 162, 235, 1)',
                  borderWidth: 1
              }]
          },
          options: …

我怎样才能在chartJS折线图中获得这种点？

我是 Chartjs 的完全初学者，并且很难从官方文档中找出用于设计自定义工具提示（折线图）的配置，如下所示：

当前配置和图像：

const data = {
  labels: labelsArray,
  datasets: [
    {
      fill: false,
      lineTension: 0,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: '#006fc9',
      borderWidth: 1,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(0, 111, 201, 0.23)',
      pointHoverBorderColor: 'rgba(0, 109, 197, 0.45)',
      pointHoverBorderWidth: 1,
      pointRadius: 0,
      pointHitRadius: 10,
      data: leadsArr,
    }
  ]
};

const options = {
  maintainAspectRatio: false,
  responsive: true,
  legend: {
    display: false
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: …

我正在尝试向我的圆环图添加 D3 图例，我按照这里的示例进行操作：http : //bl.ocks.org/ZJONSSON/3918369。圆环图呈现良好。

但是，我遇到了以下错误：

在 d3.legend() 函数中，我收到此错误“Uncaught TypeError: node.getAttribute is not a function”和“Uncaught TypeError: this.querySelectorAll is not a function”。

我不知道为什么......有什么想法吗？

// Alerts.js
renderBody() {
    const {list, currentProgram} = this.props
    const width = 260;
    const height = 260;
    const radius = width/2; // 130

    // arc & label generator
    let arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(90)
      .padAngle(0.02);

    let labelArc = d3.arc()
      .outerRadius(radius + 60)
      .innerRadius(radius - 90);

    // pie generator
    let pie = d3.pie()
      .sort(null)
      .value( …

我有图表问题。我无法在图表、yAxis 单位标题和带有元素的 yAxis labelString 周围添加边框。我正在使用与打字稿的反应。我只能将字符串添加到 labelString。你可以在屏幕上看到我想要做什么，在另一个屏幕上你可以看到我实际拥有的东西。

chart.js@2.7.1 中是否有任何选项可以添加这些元素？

第一张图是我的目标。二是实事求是。@edit 这是我的 chartOptions 文件。我只是在函数中传递参数来获得这些选项。

import * as Chart from 'chart.js';

const getOptions = (
    beginAtZero: boolean,
    tickMax: number,
    tickStepValue: number,
    titleText: string,
    xAxesLabelString: string,
    yAxesLabelString: string,

): Chart.ChartOptions => {
    const ticks: Chart.LinearTickOptions =  {
        beginAtZero,
        fontColor: '#3C3750',
        fontFamily: 'Muli',
        fontSize: 10,
        fontStyle: 'bold',
        max: tickMax,
        stepSize: tickStepValue,
    };
    const options: Chart.ChartOptions = {
        legend: {
            display: false,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: …

我正在使用 chartist.js 创建和显示一个简单的条形图。我无法围绕 animate 函数以及如何使用它，我正在为图表创建中的条形寻找一个简单的上升动画。我从另一个问题中找到了这个示例，我希望将条形图设置为与示例中的条形图相同的动画

我一直在使用react-jsx-highcharts模块，将Highcharts集成到我的 React 应用程序中。

效果很好。现在我想包括boost 模块。我不知道该怎么做。我尝试简单地添加，import 'highcharts/modules/boost'但这似乎不起作用。

有谁知道如何解决这个问题？

我会创建一个水平条形图。

问题是我无法更改图表的高度（不是条形图）

我创建了我的数据和选项配置：

  this.data = {
        labels: ['SAF/TGA'],
        datasets: [

            {
                label: 'SAF/TGA',
                backgroundColor: '#9CBB65',
                borderColor: '#72242',
                data: [28],

            }
        ],
  }
  this.options= {
            responsive: true,
    maintainAspectRatio: false

        scales: {
        yAxes: [{
          barThickness: 5,
          gridLines:{
          display: true,
          offsetGridLines: false
          }
        }],
        xAxes: [{
          gridLines:"rgba(0, 0, 0, 0)"
        }]
      },

    }
}

然后我用高度和宽度选项在 HTML 中调用我的图表：

<p-chart type="horizontalBar" [data]="data" [options]="options" width="10" height="10px">
</p-chart>

当我更改heighthtml 中的值时，高度不会改变

这就是我想要的

随着轴越来越靠近酒吧。

我必须在鼠标悬停时在 react d3 v4 条形图上添加工具提示。我尝试了下面提到的自定义功能，

onMouseOverHandler(d){
   var tooltip = d3Select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html(d)  
    .style("left", d3Select(this).attr("cx") + "px")     
    .style("top", d3Select(this).attr("cy") + "px");

但它不起作用。有人能帮我解决这个问题吗？

谢谢，阿伦 S